css一些特殊的图形,CSS 绘制特殊图形

先来绘制一个简单基础容器

CSS 绘制特殊图形

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;

}

示例1

示例2

从示例1 和 示例2(通过把示例1的宽高设置为0得到)可以看出，容器的 border 是由三角形组成，由此可以得知在绘制一些特殊图形时可以通过控制 border来进行特殊图形的绘制，比如：等腰三角形、直角三角形、梯形...

得到一个等腰三角形：

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;

}

等腰三角形

从此控制边框颜色，我们可以得到以下各种图形：

image.png

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;

}

从上可以看出，通过控制容器边框和宽高，可以绘制出各种特殊图形。

接下来，我们来绘制各种圆形相关图形：

image.png

圆形

/* 圆形 */

.div7 {

width: 100px;

height: 100px;

border: 0;

border-radius: 50%;

}

椭圆形

绘制椭圆边框圆弧需要符合宽高各一半的原则。

绘制椭圆

/* 椭圆 */

.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%;

}