.box1{
width:240px;
height:50px;
line-height:50px;
text-align:center;
color:#FFF;
background-color:#3598dc;
background: radial-gradient( circle at top left, transparent 8px,#3598dc 0 ) top left,
radial-gradient( circle at top right, transparent 8px,#3598dc 0 ) top right,
radial-gradient( circle at bottom right,transparent 8px, #3598dc 0 ) bottom right,
radial-gradient( circle at bottom left, transparent 8px,#3598dc 0 ) bottom left;
background-size:50% 50%;
background-repeat:no-repeat;
}
.box2{
width:240px;
height:70px; /*改变高度不同的效果哦*/
line-height:70px;
color:#FFF;
text-align:center;
background: #8BC34A;
background: linear-gradient(135deg, transparent 15px, #8BC34A 0) top left,
linear-gradient(-135deg, transparent 15px, #8BC34A 0) top right,
linear-gradient(-45deg, transparent 15px, #8BC34A 0) bottom right,
linear-gradient(45deg, transparent 15px, #8BC34A 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.box3 {
width: 120px;
height: 80px;
color:#FFF;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-left:20px;
}
.box3:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-right: 25px solid red;
}
.box4 {
width: 200px;
height: 55px;
line-height:55px;
text-align:center;
color:#FFF;
background: #8BC34A;
background: linear-gradient(135deg, transparent 0, #8BC34A 0) top left,
linear-gradient(-135deg, transparent 20px, #8BC34A 0) top right,
linear-gradient(-45deg, transparent 20px, #8BC34A 0) bottom right,
linear-gradient(45deg, transparent 0, #8BC34A 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.box5{
width: 0;
height: 0;
border-right: 70px solid transparent;
border-top: 70px solid #ffde00;
border-left: 70px solid #ffde00;
border-bottom: 70px solid #ffde00;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
border-bottom-left-radius: 70px;
border-bottom-right-radius: 70px;
}
493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
