CSS相关,手画三角形,正方形,扇形
2024-09-07 00:18:02
三角形
实现一个三角形
<!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>
最新文章
- WCF初探-16:WCF数据协定之基础知识
- poj 1780 Code
- C#向C++编写的DLL传递字符串参数的办法
- git 撤销修改以及删除文件
- Google为何这么屌
- .net开发微信(1)——微信订阅号的配置
- SSM-Spring-13:Spring中RegexpMethodPointcutAdvisor正则方法切入点顾问
- css过渡
- .net面式题
- configure、make 和 make install 的区别
- C++Primer第五版——习题答案详解(三)
- centos7下安装docker(3.1创建镜像commit)
- bbs项目中的零碎点记录
- gearman的持久化,以mysql的方式
- 解决&;quot;VC6.0的ClassView里不能显示类或成员变量&;quot;问题
- oracle快速学习
- [置顶] Java中字符串为什么不以\0结尾
- MySQL数据库设置为只读及测试【转】
- 关于js的当前日期的格式化,和两个日期之间的相减的天数
- ThreadLocalRandom原理