css——一起画个三角形

 

1.利用border特性

首先看个例子，该例的border四边的颜色不同，宽度均为50px

 

代码如下：

width: 0;
height: 0;
border-top:50px solid #FFF0C4;
border-left:50px solid #C7F5BC;
border-right:50px solid #D9BBF3;
border-bottom:50px solid #FCC2C7;            

　　

根据border的这个特性，调整border宽度和颜色组合，我们可以画出各种三角形，如：

 

 

 

 

.border1{
    height: 0;
    width: 0;
    border-top:50px solid #58a;
    border-left:50px solid white;
    border-right:50px solid white;
    border-bottom:50px solid white;
}

.border2{
    height: 0;
    width: 0;
    border-top:25px solid white;
    border-left:25px solid #58a;
    border-right:25px solid white;
    border-bottom:25px solid #58a;
}

.border3{
    height: 0;
    width: 0;
    border-top:50px solid #58a;
    border-left:20px solid white;
    border-right:50px solid white;
    border-bottom:50px solid white;
}

 

再利用圆角和伪元素（::after,::before）就可以创建出简单的对话泡效果了

 

 

 

 

 

.talk3{
    float: left;
    margin-left: 70px;
    height: 50px;
    width: 100px;
    background-color: #58a;
    border-radius: 60px;
    position: relative;
}
.talk3::after{
    content: "";
    position: absolute;
    bottom: -5px;
    border-top:10px solid rgba(0,0,0,0);
    border-left:40px solid rgba(0,0,0,0);
    border-right:40px solid #58a;
    border-bottom:10px solid #58a;
    left: -50px;
    transform: rotate(-10deg);
}

 

2.利用background渐变

这种方法使用利用的是background渐变linear-gradient方法。通常这个方法可以用来制造线性渐变

 

background: linear-gradient(to top right, black 10px, #58a);

 

将不同颜色的渐变开始位置设为同一点，或者将渐变点二的起始位置包含在渐变点一之前，则会使渐变一的渐变部分被渐变二的非渐变部分覆盖，形成切割背景的效果。这段话说的有些绕，用代码解释其实就是
background: linear-gradient(to top right, transparent 渐变1, #58a 渐变2);(渐变2<渐变1)

利用这个原理，我们就可以制造出更加丰富的边框样式

 

background: #58a;
background: linear-gradient(45deg, transparent 20px, #58a 0%);

 

如果需要切分多个角，则可以配合背景切割技术，将背景分割为多个部分，在每个部分上进行切分

 

background: #58a;
background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
linear-gradient(-135deg, transparent 15px, #655 0) top right,
linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
linear-gradient(45deg, transparent 15px, #655 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

 

引申一下

上面用的是背景线性渐变，同理，利用径向渐变我们还可以创造出圆角的切口，修改上述代码为：

background: #58a;
background: radial-gradient(circle at top left,transparent 15px, #58a 0) top left,
            radial-gradient(circle at top right,transparent 15px, #655 0) top right,
            radial-gradient(circle at bottom right,transparent 15px, #58a 0) bottom right,
            radial-gradient(circle at bottom left,transparent 15px, #655 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
    

 

得到效果：

 

ps:这种用法最好还是在正斜切，也就是斜切角是45，-45，135，-135的时候使用。其他角度(或径向)网页渲染后会看到明显的锯齿边缘，并不美观

3.利用背景图

这种方法是最为省事儿的，切出图片设为div的背景即可，但过多图片的引用会大大增加http请求数，降低页面的性能。还是只有当边框涉及到非常复杂的形状或阴影，难以用css解决的时候再用吧~

4.利用canvas和svg

只要是画画的事儿，就没有这俩不能解决的，但既然是css实现，暂且也就不提他们了吧

转载于:https://www.cnblogs.com/xiaoqianzi/p/5472328.html