.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; }
更新时间:2020-04-02 16:52:59