CSS 绘制特殊图形
2018-05-16 本文已影响0人
Junting
先来绘制一个简单基础容器
<!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>CSS 绘制特殊图形</title>
<style>
div {
width: 300px;
height: 300px;
background: orange;
border: 30px solid;
border-left-color: gold;
border-bottom-color: gray;
border-right-color: salmon;
border-top-color: greenyellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
示例1
示例2
从示例1 和 示例2（通过把示例1的宽高设置为0得到）可以看出，容器的 border 是由三角形组成，由此可以得知在绘制一些特殊图形时可以通过控制 border来进行特殊图形的绘制，比如：等腰三角形、直角三角形、梯形...
得到一个等腰三角形：
<style>
div {
width: 0px;
height: 0px;
background: transparent;
border: 30px solid;
/* 通过控制各边框的颜色 */
border-left-color: transparent;
border-bottom-color: gray;
border-right-color: transparent;
border-top-color: transparent;
}
</style>
等腰三角形
从此控制边框颜色，我们可以得到以下各种图形：
image.png
<style>
div {
float: left;
margin: 30px 30px;
width: 300px;
height: 300px;
background: orange;
border: 30px solid;
/* 通过控制各边框的颜色 */
/* border-left-color: gold;
border-bottom-color: gray;
border-right-color: salmon;
border-top-color: greenyellow; */
}
/* 沙漏 */
.div1 {
width: 0;
height: 0;
background: transparent;
border: 30px solid;
border-left-color: transparent;
border-bottom-color: gray;
border-right-color: transparent;
border-top-color: greenyellow;
}
/* 书签 */
.div2 {
width: 0;
height: 0;
background: transparent;
border: 30px solid;
border-left-color: gold;
border-bottom-color: gray;
border-right-color: transparent;
border-top-color: greenyellow;
}
/* 等腰直角三角形 */
.div3 {
width: 0;
height: 0;
background: transparent;
border: 30px solid;
border-left-color: gold;
border-bottom-color: gray;
border-right-color: transparent;
border-top-color: transparent;
}
/* 书签 */
.div4 {
width: 0;
height: 0;
background: transparent;
border: 30px solid;
border-left-color: gold;
border-bottom-color: gray;
border-right-color: salmon;
border-top-color: greenyellow;
}
/* 超人热裤 */
.div5 {
width: 0;
height: 10px;
background: transparent;
border: 30px solid;
border-bottom: 0;
border-left-color: gold;
border-bottom-color: gray;
border-right-color: salmon;
border-top-color: greenyellow;
}
/* 梯形 */
.div6 {
width: 20px;
height: 0px;
background: transparent;
border: 30px solid;
border-left-color: transparent;
border-bottom-color: gray;
border-right-color: transparent;
border-top-color: transparent;
}
</style>
从上可以看出，通过控制容器边框和宽高，可以绘制出各种特殊图形。
接下来，我们来绘制各种圆形相关图形：
image.png
圆形
<style>
/* 圆形 */
.div7 {
width: 100px;
height: 100px;
border: 0;
border-radius: 50%;
}
</style>
椭圆形
绘制椭圆边框圆弧需要符合宽高各一半的原则。
绘制椭圆
<style>
/* 椭圆 */
.div8 {
width: 100px;
height: 80px;
border: 0;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
</style>
