我正在尝试创建一个带三 Angular 形的双边框工具提示,但我不知道如何制作轮廓部分,因为没有轮廓-右/左/上/下。
这是我目前的情况
body {
background-color: rgb(83, 110, 218);
}
.trigger {
margin-top: 150px;
position: relative;
width: 30px;
height: 30px;
background-color: #000;
}
.tooltip {
/* Misc */
text-align: center;
padding-top: 20px;
background-color: white;
position: absolute;
width: 300px;
height: 50px;
left: 70px;
top: -25px;
outline-color: white;
outline-width: 3px;
outline-style: solid;
border-color: rgb(83, 110, 218);
border-width: 3px;
border-style: solid;
}
.tooltip:after,
.tooltip:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
position: absolute;
pointer-events: none;
}
.tooltip:after {
border-color: rgba(136, 183, 213, 0);
border-right-color: white;
border-width: 20px;
margin-top: -20px;
}
.tooltip:before {
border-color: rgba(194, 225, 245, 0);
border-right-color: rgb(83, 110, 218);
border-width: 26px;
margin-top: -26px;
}
<div class="trigger">
<div class="tooltip">
Hello World
</div>
</div>
或转到此处:Fiddle
有人知道如何实现吗?
最佳答案
对于纯 CSS 替代,您可以使用以下代码段。它基本上使用 double
作为主矩形的 border-style
(而不是 outline
)和一个旋转 45 的伪元素生成三 Angular 形的度数。三 Angular 形有一个 border
与主矩形(或主体)的内边框颜色相同,还有一个白色的 box-shadow
以产生双边框效果。伪元素的位置适当,使其看起来像是主矩形的 border
的延续。
Note: To modify the thickness of the border, the
border-width
of parent,border-width
of the pseudo-element, thebox-shadow
on the pseudo-element and the positioning of the pseudo-element should be modified accordingly.
body {
background-color: rgb(83, 110, 218);
}
.trigger {
margin-top: 150px;
position: relative;
width: 30px;
height: 30px;
background-color: #000;
}
.tooltip {
/* Misc */
text-align: center;
padding-top: 20px;
background-color: white;
position: absolute;
width: 300px;
height: 50px;
left: 70px;
top: -25px;
border-color: rgb(83, 110, 218);
border-width: 6px;
border-style: double;
}
.tooltip:before {
left: -11.75px;
top: 35%;
height: 20px;
width: 20px;
border: 2.5px solid rgb(83, 110, 218);
box-shadow: -2px 2px 0px 0px white;
border-right: none;
border-top: none;
content: " ";
background: white;
position: absolute;
pointer-events: none;
transform: rotate(45deg);
}
<div class="trigger">
<div class="tooltip">
Hello World
</div>
</div>
关于html - 侧面带有三 Angular 形的 CSS 轮廓和边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28119198/