我的问题是我不能水平居中三角形指针.
好吧,我可以将指针放在一些窗口大小的中心,但是当我收缩或扩展窗口时,它会再将它放在错误的位置.
我错过了什么?
body {
background: #333333;
}
.container {
width: 98%;
height: 80px;
line-height: 80px;
position: relative;
top: 20px;
min-width: 250px;
margin-top: 50px;
}
.container-decor {
border: 4px solid #C2E1F5;
color: #fff;
font-family: times;
font-size: 1.1em;
background: #88B7D5;
text-align: justify;
}
.container:before {
top: -33px;
left: 48%;
transform: rotate(45deg);
position: absolute;
border: solid #C2E1F5;
border-width: 4px 0 0 4px;
background: #88B7D5;
content: '';
width: 56px;
height: 56px;
}Run Code Online (Sandbox Code Playgroud)
<div class="container container-decor">great distance</div>Run Code Online (Sandbox Code Playgroud)