背景:有时候,我们会遇到用CSS设计对话框效果的样式,我们可以用CSS设计出对话框的尖角效果。
一、尖角效果的实现原理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
display:block;
width:0px;
height:0px;
border-top:25px solid blue;
border-bottom: 25px solid red;
border-left: 25px solid #ccc;
border-right: 25px solid green;
background-color: green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
先设计一个div让四周的border都具有一定大小和颜色。
如果我们要的是最左边的那个小三角形,那如何去掉其他的三角形呢?
很简单:把不需要的border颜色设置成透明色的就可以了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
display:block;
width:0px;
height:0px;
border-top:25px solid rgba(0,0,0,0);
border-bottom:25px solid rgba(0,0,0,0);
border-left:25px solid #ccc;
border-right:25px solid rgba(0,0,0,0);
border-color:none;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这样小三角就设计完了,知道原理以后,我们做那种三角,对话框都轻而易举了。
二、实例运用
<div class="main_triangle">
保险金作为遗产继承时,法定继承人按照第一顺序继承人。。。。
</div>
<div class="main_triangle2"></div>
实例运用的三角,如下图只有线框,那么用两个三角叠加就可以了,第二个三角用透明色覆盖到第一个三角上面即可。
.main_triangle{
background-color: #ffffff;
margin: 0 16px;
padding:10px;
border-radius: 4px;
border: 1px solid #EF8A3D;
line-height: 16px;
position: relative;
flex: 1;
font-size: 12px;
color: #EF8A3D;
background: #FEF5F1;
}
.main_triangle::before{
content:" ";
border-left: 10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #EF8A3D;
position: absolute;
left: 140px;
top: -10px;
}
.main_triangle2{
position: relative;
}
.main_triangle2::before{
content:" ";
border-left: 10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #FFFEF5F1;
position: absolute;
left: 157px;
top: -77px;
}
@media screen and (max-width: 350px) {
.main_triangle::before{
left: 130px;
}
.main_triangle2::before{
left: 147px;
}
}