如何用CSS实现三角形与对话框

这是一期分享如何使用css属性实现三角形和对话框。

实现三角形

利用border属性。

.content{
    width: 0px;
    border-left: 100px solid red;
    border-right: 100px solid yellow;
    border-bottom: 100px solid lightgreen;
    border-top: 100px solid lightblue;
}
复制代码

效果图以下：

能够明显看出，三角形的雏形出来了，接下来，只要处理掉咱们不须要的边就行。

想要箭头向哪，只需将其他边的border颜色置transparent

.content{
    width: 0px;
    border-left: 100px solid red;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-top: 100px solid transparent;
}
复制代码

效果图以下：

此方法在项目中能知足需求

推荐指数：🌟🌟🌟

利用css3特性

利用background和transform这俩属性，此方法能够实现实心三角形和线形三角形

实心三角形实现以下：

三角形实际上是根据正方形的斜对角线切割的一半，而后将它旋转45度，再将背景设置成渐变色，形成视觉上的三角形。

HTML:

<div class="content">
    <div class="inner"></div>
</div>
复制代码

CSS:

.content{
    position: relative;
    margin: 100px;
    width: 300px;
    height: 300px;
    border: 1px solid #f2f2f2;
    background-color: lightpink;
    border-radius: 4px;
}
.inner{
    position:absolute;
    top: 100px;
    width: 100px;
    height: 100px;
    background: linear-gradient(225deg, #fff 50%, transparent 50%);
    transform: rotate(45deg);
}
复制代码

实现效果以下

线形三角形实现以下：

只需将实心三角形的背景色设置成透明色，再修改边框宽度和颜色便可

HTML:

<div class="content">
    <div class="inner"></div>
</div>
复制代码

CSS:

.content{
    position: relative;
    margin: 100px;
    width: 300px;
    height: 300px;
    border: 1px solid #f2f2f2;
    background-color: lightpink;
    border-radius: 4px;
}
.inner{
    position:absolute;
    top: 100px;
    width: 100px;
    height: 100px;
    background: linear-gradient(225deg, #fff 50%, transparent 50%);
    transform: rotate(45deg);
    border: 10px solid lightblue;
    border-width: 10px 10px 0 0;
}
复制代码

实现效果以下

此方法能实现实心和线性三角形

推荐指数：🌟🌟🌟🌟

实现对话框

实现了三角形，其实实现对话框也就容易多了，在一个矩形上加上一个三角形便可。

代码以下：

.content{
    margin: 100px;
    position: relative;
    width: 100px;
    height: 20px;
    border: 1px solid lightblue;
    border-radius: 4px;
}
.inner{
    position: absolute;
    top: 50%;
    right: 0;
    width: 6px;
    height: 6px;
    border: 1px solid lightblue;
    transform: translate(50%,-50%) rotate(45deg);
    background-color: #ffffff;
    border-left-color: transparent;
    border-bottom-color: transparent;
}
复制代码

效果以下