<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style> div { width: 50px; height: 50px; background-color: red; margin: 5px; text-align:center; line-height: 50px; } /* border-radius4个参数 左上 右上 右下 左下(顺时针) */ .box{border-radius: 50%;} .semi-circle{border-radius: 100px 100px 0 0;height: 50px;} .sector{border-radius: 100% 0 0 0;} /* -webkit-transform旋转 */ .arc { border-radius: 100px 0 100px 0; -webkit-transform: rotate(45deg); } .triangle { background: none; width: 0; height: 0; border: 50px solid red; border-color: red transparent transparent transparent;/* transparent透明 */ } .rectangle::first-letter{ color: white;} .rectangle { border-radius: 10px; position: relative; } /*子绝父相(子级绝对定位(absolute)父亲相对定位relative)*/ .rectangle::before { width: 0; height: 0; border: 15px solid red; border-color: transparent transparent transparent green; content: ""; position: absolute; right: -30px; top: 14px; } .heart{ width: 60px; height: 80px; background: none; position: relative; } /* before、after伪元素 (属于行内元素设置宽度和高度无效解决办法 absolute变成块级元素) */ .heart::before, .heart::after { width: 100%; height: 100%; content: ""; background-color: red; position: absolute; border-radius: 100px 100px 0 0; -webkit-transform: rotate(-45deg); } .heart::after { -webkit-transform: rotate(45deg); left: 46px; } .one,.two,.there { margin: 0; visibility: hidden; } .one { width: 80px; height: 100px; margin: 10px; background-color: red; -webkit-transform: rotate(120deg); } .two { width: 100%; height: 100%; background-color:royalblue; -webkit-transform: rotate(-60deg); } .there { width: 100%; height: 100%; background-color: yellow; -webkit-transform: rotate(-60deg); visibility: visible; background: url(b.jpg); background-size:contain; } .one,.two { overflow: hidden; } </style> </head> <body> <div>矩形</div> <div class="box">圆形</div> <div class="semi-circle">半圆</div> <div class="sector">扇形</div> <div class="arc">弧形</div> <div class="triangle"> <p style="line-height: 15px;position: relative;top: -65px;left: -7px;">三角形</p> </div> <div class="rectangle">CSS3</div> <div class="heart"></div> <div class="one"> <div class="two"> <div class="there"></div> </div> </div> </body> </html>
运行结果