html设置尖⾓,CSS为div添加尖⾓样式
先来看⼀下尖⾓效果
⼀个div，右侧边框的上出现了⼀个尖⾓的形状。那么如何来实现这么⼀个效果呢？
1.原理
对于⼀个块级元素，但我们分别将元素的上下左右四个border设置成⼀个⽐较⼤的像素(如10px)，样式设置成solid ，分别设置成不同的颜⾊的时候，同时将元素的width,height设置为0.这时我们将会看到四条边均呈现为三⾓形的形状。如图：
其CSS样式为：
.element{
width: 0px;
height: 0px;
border-top: 20px solid aqua;
border-right: 20px solid #760000;
border-bottom: 20px solid blue;
border-left: 20px solid darkkhaki;
}
四个三⾓形分别是四条border四条border所呈现出来的，⽽我们最终的效果好像跟⼀个三⾓形的关系⽐较⼤些。如果得到⼀个三⾓形呢？其实这个很简单，我们只需要把其余三条border颜⾊属性设置为transparent(透明)的样式，另⼀个border的颜⾊属性保持不变。
.element{
width: 0px;
height: 0px;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid darkkhaki;
}此时的效果：
好了，三⾓形出来了。那我们也就实现了最为关键的的地⽅。我们在弄出来⼀个⽩⾊的三⾓形，然后将⽩⾊三⾓形覆盖到这个有⾊三⾓形之上，但是不能完全覆盖，让其露出⼀个尖⾓的效果来。这就是基本的原理。
2.实现
⾸先需要⼀个div容器，设置border,width,height的属性，同时将设置其为相对定位。
.angle-wrapper {
width: 300px;
height: 200px;
position: relative;
margin: 20px auto;
border: 2px solid #cccccc;
}
然后需要为这个在这个div右边框上添加两个三⾓形，⼀个三⾓形颜⾊与边框颜⾊相同，另⼀个三⾓形颜为⽩⾊，⽤于覆盖第⼀个三⾓形颜⾊的⼀部分。
这⾥我们使⽤元素的伪选择器:before,:after来加⼊这两个三⾓形，before和after默认为⾏内元素，所以⾸先要将其设置为块级元素，绝对定位。
⾸先添加before伪选择器，⽤它来⽣成与border颜⾊的相同的第⼀个三⾓形，并将其定位到左边框上。
.angle-wrapper:before {
content: '';
width: 0;
height: 0;
border: 20px solid transparent;
border-left-color: #cccccc;
position: absolute;
left: 100%;
top: 50%;
margin-top: -20px;
}
然后添加after伪选择器，⽤它⽣成⼀个⽩⾊的三⾓形，并将其定位到左边框上。这⾥需要注意的是⽩⾊三⾓形的⼤⼩要⽐有⾊三⾓形要⼩⼀些，⼩多少要根据div边框的⼤⼩⽽定。我这⾥边框为2px，所以⽩⾊三⾓形就⽐灰⾊三⾓形就⼩两个px。这样可以避免⽩⾊三⾓形将灰⾊三⾓形全覆盖，然后可以产⽣尖⾓的效果来。(我这⾥说的⼤⼩就是设置三⾓形时的border的px值，如after这⾥是18px,before那⾥是
20px)
.angle-wrapper:after {
content: "";
width: 0;
height: 0;
border: 18px solid transparent;
border-left-color: #FFFFFF;
position: absolute;
left: 100%;
top: 50%;
margin-top: -18px;
div border属性
}⽤绝对定位将这个⽩⾊三⾓形定位到左边框上，覆盖掉灰⾊三⾓形的⼀部分，留下⼀个尖⾓。好了，最终的效果就是这样的。
完成。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。