DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=">
<title>title>
<style type="text/css">
#div1{
width: 0px;
height: 0px;
background: lightblue;
border: 150px solid rgb(255, 255, 255);
border-bottom-color:lightblue；
} #div2{ width: 900px; height: 420px; background: lightgreen; border-top-left-radius: 210px; border-bottom-left-radius: 210px; border-top-right-radius: 210px; border-bottom-right-radius: 210px; } #div3{ width: 20px; height: 20px; border: 50px rgb(226, 139, 212) solid; border-radius: 50%; border-bottom-color: lightblue; border-left-color: lightpink; border-right-color:lightgreen ; } style> head> <body> <div id="div1">div> <hr> <div id="div2">div> <hr> <div id="div3">div> <hr> body> html>
1
比如这个三角形是由一个常规的正方形变化来的
三角形的顶点部分就是代码中的
#div1{
width: 0px;
height: 0px;
此时的高和宽都为0
此时集中为一点
}
#div1{
background: lightblue;
此时默认背景为lightblue色
border: 150px solid rgb(255, 255, 255);
然后定义border的大小为150px白色，此时整个被白色覆盖
border-bottom-color:lightblue;
然后从这个点到整个大盒子的底部所连接形成的图型呈一个三角形，然后定义为lightblue色，此时把白色覆盖出现了一个lightblue的三角形
}
而border的解释
如图
如果想要得到等腰梯形的话
修改代码如下
#div1{
width: 150px;
height:0px;
background: lightblue;
border: 150px solid rgb(255, 255, 255);
border-bottom-color:lightblue;
}
只需要width改为150px
此时就组成了上底为150px，下底为300的等腰梯形
border的解释如下图
2.
如图所示的图形就是由一个长方形变化来的
具体过程就是四个角进行添加圆角边框属性
要呈现这个效果添加圆角边框的值为
大长方形的一半
具体代码如下
#div2{
width: 900px;
height: 420px;
background: lightgreen;
border-top-left-radius: 210px;
border-bottom-left-radius: 210px;
border-top-right-radius: 210px;
border-bottom-right-radius: 210px;
}
3
要实现如上图的效果几个颜色不同的扇形组合成的图像
首先要实现如图所示的效果
代码如下
#div3{
width: 50px;
height: 50px;
border: 50px rgb(226, 139, 212) solid;
}
然后再进行添加圆角边框属性
border-radius: 50%;
效果如下
最后添加上几个不同的颜色属性就可以了
代码如下
#div3{
border-bottom-color: lightblue;
border-left-color: lightpink;
border-right-color:lightgreen ;
}
就可以得到如下的效果了啦
京公网安备 11010802041100号