css3 對話框上的三角形

1.純?nèi)切蔚膶懛ǎ?/p>

html:

<div class="tooltip-popper is-dark">消息提醒

? ? ? ? <div class="popper-arrow"></div>

</div>


樣式：

.tooltip-popper{

? ? ? ? position: absolute;

? ? ? ? border-radius: 4px;

? ? ? ? padding: 10px;

? ? ? ? font-size: 12px;

? ? ? ? text-align: center;

? ? ? ? white-space: nowrap;

? ? ? ? line-height: 1.2;

? ? ? ? min-width: 10px;

? ? ? ? word-wrap: break-word;

? ? ? ? transform-origin: left center;

? ? ? ? z-index: 2007;

? ? ? ? visibility: hidden;

? ? ? ? opacity: 0;

? ? ? ? top: 55px;

? ? ? ? left: 50%;

? ? ? ? transform: translateX(-50%);

? ? ? ? transition: all .3s;

? ? ? ? -webkit-transition: all .3s;

? ? }

? ? .tooltip-popper.is-dark{

? ? ? ? background-color: #595959;

? ? ? ? box-shadow: 0 12px 32px 0 rgba(38, 38, 38, 0.16);

? ? ? ? transition: opacity 0.3s;

? ? ? ? color: #FFF;

? ? }

? ? .tooltip-popper .popper-arrow,

? ? .tooltip-popper .popper-arrow::after {

? ? ? ? position: absolute;

? ? ? ? display: block;

? ? ? ? width: 0;

? ? ? ? height: 0;

? ? ? ? border-color: transparent;

? ? ? ? border-style: solid;

? ? }

? ? .tooltip-popper .popper-arrow {

? ? ? ? top: -9px;

? ? ? ? width: 0;

? ? ? ? height: 0;

? ? ? ? left: 50%;

? ? ? ? margin-left: -5px;

? ? ? ? border-left: 6px solid transparent;

? ? ? ? border-right: 6px solid transparent;

? ? ? ? border-bottom: 6px solid #595959;

? ? }


2.正方形的寫法：

html:

消息提醒

? ? ? ? <div class="popper-arrow"></div>

</div>


樣式：

.tooltip-popper{

? ? ? ? position: absolute;

? ? ? ? border-radius: 4px;

? ? ? ? padding: 10px;

? ? ? ? font-size: 12px;

? ? ? ? text-align: center;

? ? ? ? white-space: nowrap;

? ? ? ? line-height: 1.2;

? ? ? ? min-width: 10px;

? ? ? ? word-wrap: break-word;

? ? ? ? transform-origin: left center;

? ? ? ? z-index: 2007;

? ? ? ? visibility: hidden;

? ? ? ? opacity: 0;

? ? ? ? top: 55px;

? ? ? ? left: 50%;

? ? ? ? transform: translateX(-50%);

? ? ? ? transition: all .3s;

? ? ? ? -webkit-transition: all .3s;

? ? }

? ? .tooltip-popper.is-dark{

? ? ? ? background: #303133;

? ? ? ? transition: opacity 0.3s;

? ? ? ? color: #FFF;

? ? }

? ? .tooltip-popper .popper-arrow,

? ? .tooltip-popper .popper-arrow::after {

? ? ? ? position: absolute;

? ? ? ? display: block;

? ? ? ? width: 0;

? ? ? ? height: 0;

? ? ? ? border-color: transparent;

? ? ? ? border-style: solid;

? ? }

? ? .tooltip-popper .popper-arrow {

? ? ? ? border-width: 5px;

? ? ? ? top: -3px;

? ? ? ? width: 5px;

? ? ? ? height: 0;

? ? ? ? background: #303133;

? ? ? ? left: 50%;

? ? ? ? margin-left: -5px;

? ? ? ? transform: rotate(45deg);

? ? }

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容