我正在嘗試在CSS中畫(huà)一個(gè)提示.

到目前為止,我取得了“中等成功”,唯一的問(wèn)題是,根據(jù)DIV寬度,尖端有時(shí)不在中心位置.

我想要的是：

到目前為止,我的代碼：

.logo {

color: #000;

font-size: 1.4em;

text-align: center;

padding-top: 1.5em;

text-transform: uppercase;

position: relative;

}

.line {

height: 1px;

overflow: hidden;

background: #000;

}

.line.top,

.line.bottom {

width: 90%;

}

.line.top {

margin: 0 auto 4px;

}

.line.bottom {

margin: 4px auto 0;

}

.angle {

position: absolute;

top: 19px;

left: 46%; // I think my problem is here!

}

.angle .line.left,

.angle .line.right {

width: 20px;

}

.angle .line.left {

-ms-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

margin: 7px;

}

.angle .line.right {

-ms-transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

margin: -7px;

}

MY TEXT

我該如何解決？

我以為設(shè)置.angle寬度：30px和margin：0自動(dòng),但它的位置是：absolute,所以這是不可能的.

附言：可以使用LESS.

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的css画个框,用CSS绘制带有边框的尖端的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。