CSS相关，手画三角形，正方形，扇形

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS相关，⼿画三⾓形，正⽅形，扇形三⾓形
实现⼀个三⾓形
<!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>。