如何用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;
}
複製代碼

效果以下