三角形
实现一个三角形
<!DOCTYPE html> <html> <head> <title>三角形</title> <style type="text/css"> .box1, .box2, .box3, .box4 { height: 0px; width: 0px; float: left; border-style: solid; margin: 10px; } .box1 { /* 等腰直角 */ border-width: 100px; border-color: tomato transparent transparent transparent; } .box2 { /* 等边 */ border-width: 100px 173px; border-color: transparent tomato transparent transparent; } .box3 { /* 等腰 */ border-width: 100px 80px; border-color: transparent transparent tomato transparent; } .box4 { /* 其他 */ border-width: 100px 90px 80px 70px; border-color: transparent transparent transparent tomato; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body> </html>
正方形
使用 css 实现一个宽高自适应的正方形
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 都是像对于屏幕宽度的比例 */ .square1 { width: 10%; height: 10vw; background: red; } /* margin/padding 百分比是相对父元素 width 的 */ .square2 { width: 20%; height: 0; padding-top: 20%; background: orange; } /* 通过子元素 margin */ .square3 { width: 30%; overflow: hidden; /* 触发 BFC */ background: yellow; } .square3::after { content: ''; display: block; margin-top: 100%; /* 高度相对于 square3 的 width */ } </style> </head> <!-- 画一个正方形 --> <body> <div class="square1"></div> <div class="square2"></div> <div class="square3"></div> </body> </html>
扇形
实现一个 1/4 圆、任意弧度的扇形
有多种实现方法，这里选几种简单方法（我看得懂的）实现。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 通过 border 和 border-radius 实现 1/4 圆 */ .sector1 { height: 0; width: 0; border: 100px solid; border-radius: 50%; border-color: turquoise tomato tan thistle; } /* 类似三角形的做法加上父元素 overflow: hidden; 也可以实现任意弧度圆 */ .sector2 { height: 100px; width: 200px; border-radius: 100px 100px 0 0; overflow: hidden; } .sector2::after { content: ''; display: block; height: 0; width: 0; border-style: solid; border-width: 100px 58px 0; border-color: tomato transparent; transform: translate(42px, 0); } /* 通过子元素 rotateZ 和父元素 overflow: hidden 实现任意弧度扇形（此处是60°） */ .sector3 { height: 100px; width: 100px; border-top-right-radius: 100px; overflow: hidden; /* background: gold; */ } .sector3::after { content: ''; display: block; height: 100px; width: 100px; background: tomato; transform: rotateZ(-30deg); transform-origin: left bottom; } /* 通过 skewY 实现一个60°的扇形 */ .sector4 { height: 100px; width: 100px; border-top-right-radius: 100px; overflow: hidden; } .sector4::after { content: ''; display: block; height: 100px; width: 100px; background: tomato; transform: skewY(-30deg); transform-origin: left bottom; } /* 通过渐变设置60°扇形 */ .sector5 { height: 200px; width: 200px; background: tomato; border-radius: 50%; background-image: linear-gradient(150deg, transparent 50%, #fff 50%), linear-gradient(90deg, #fff 50%, transparent 50%); } </style> </head> <body> <div style="display: flex; justify-content: space-around;"> <div class="sector1"></div> <div class="sector2"></div> <div class="sector3"></div> <div class="sector4"></div> <div class="sector5"></div> </div> </body> </html>