css3切角文本框_特殊border的样式 -- CSS3实现三种切角效果

效果一：

代码：

corner cutcorner cutcorner cutcorner cut

CSS：

.cornerCut{

width:200px;

margin: 10px 20px;

height: 200px;

background:#58a;

color:#fff;

text-align: center;

font-size:10px;

background:linear-gradient(45deg,transparent 15px, #58a 0);

}

效果二：

代码：

CSS：

.cornerCut2{

width:200px;

margin: 10px 20px;

height: 200px;

background:#58a;

background:linear-gradient(-45deg,transparent 15px, #58a 0) bottom right,

linear-gradient(45deg,transparent 15px, #58a 0) bottom left,

linear-gradient(135deg,transparent 15px, #58a 0) top left,

linear-gradient(-135deg,transparent 15px,#58a 0) top right;

background-size: 50% 50%;

background-repeat: no-repeat;

}

效果三：

代码：

CSS：

.cornerArc{

width:200px;

margin: 10px 20px;

height: 200px;

background:#58a;

background:radial-gradient(circle at top left,transparent 15px,#58a 0) top left,

radial-gradient(circle at top right,transparent 15px,#58a 0) top right,

radial-gradient(circle at bottom right,transparent 15px,#58a 0) bottom right,

radial-gradient(circle at bottom left,transparent 15px,#58a 0) bottom left;

background-size: 50% 50%;

background-repeat: no-repeat;

}

标签：CSS3,right,切角,--,gradient,background,58a,15px,transparent

来源： /houxianzhou/p/13953427.html