我正在嘗試在CSS中畫一個提示.

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

我想要的是：

到目前為止,我的代碼：

.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

我該如何解決？

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

附言：可以使用LESS.

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。