一、实现一个对话框
步骤：
（1）三角形的实现
初始效果显示：
初始效果的源代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title> perfect*</title> <style> .tr{ width:0; height:0; border: 50px solid; border-color: #f00 #0f0 #ccc #00f; } </style> </head> <body> <div class="tr"></div> </body> </html>
<meta http-equiv="X-UA-Compatible" content="edge" />
Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。即如果你有IE9的话说明你有IE789，那么就调用高版本的那个也就是IE9。
X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的，这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首选的兼容性模式。
border-color：<color>{1,4}
默认值：看每个独立属性
相关属性：[ border-top-color ] || [ border-right-color ] || [ border-bottom-color ] || [ border-left-color ]
说明：
设置或检索对象的边框颜色。参阅border-colors属性。
- 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
- 如果只提供一个，将用于全部的四边。
- 如果提供两个，第一个用于上、下，第二个用于左、右。
- 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
- 如果border-width等于0或border-style设置为none，本属性将被忽略。
- 对应的脚本特性为borderColor。
最终实现的效果：
将上述源代码中的border-color改为：
border-color: transparent transparent #ccc transparent;//上、右、下、左
transparent为默认值，边框颜色为透明的
现在使用三角形进行来进行制作对话框：
对话框最终效果：
对话框最终的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title> perfect*</title> <style> /*.tr{ width:0; height:0; border: 50px solid; border-color: transparent transparent #ccc transparent; }*/ .ts{ position: relative; margin-top: 50px; margin-left: 50px; padding-left:20px ; width: 300px; line-height: 2; background:blueviolet; color: #fff; } .ts::before{ content:\'\'; position: absolute; border: 8px solid; border-color: transparent blueviolet transparent transparent; left: -16px; top: 8px; } </style> </head> <body> <div class="ts">这是一个对话框！！</div> </body> </html>
:before 选择器在被选元素的内容前面插入内容。
二、画一个平行四边形
其最终的效果：
利用skew特性，第一个参数为x轴倾斜的角度，第二个参数为y轴倾斜的角度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>perfect*</title>
<style>
.par{
margin-top:50px ;
margin-left: 50px;
width: 200px;
height: 100px;
background: blueviolet;
transform: skew(-20deg,0);
}
</style>
</head>
<body>
<div class="par"></div>
</body>
</html>
三、用一个div画一个五角星
最终实现的效果：
实现该效果的源代码：
<!DOCTYPE html>
<html>
<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>perfect*</title>
<style>
#str{
position: relative;
margin: 200px auto;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent blueviolet transparent;
border-width: 70px 100px;
transform: rotate(35deg);
}
#str::before{
position: absolute;
content:\'\';
width: 0;
height: 0;
top: -128px;
left: -95px;
border-style:solid;
border-color: transparent transparent blueviolet transparent;
border-width: 80px 30px;
transform: rotate(-35deg);
}
#str::after{
position: absolute;
content: \'\';
width: 0;
height: 0;
top: -45px;
left: -140px;
border-style:solid ;
border-color: transparent transparent blueviolet transparent;
border-width: 70px 100px;
transform: rotate(-70deg);
}
</style>
</head>
<body>
<div id="str"></div>
</body>
</html>
四、用一个div实现