我想使用 html 和 CSS 制作一些自定义工具提示。我遇到的主要问题是箭头样式。
结果或多或少符合我的要求，但我不敢相信我需要逐个像素地设置这些值，例如：右、上等。也许有更优雅的方法来做到这一点？
body {
background: #de302f;
}
.container {
position: relative;
max-width: 600px;
height: auto;
border: 2px solid #ffffff;
margin: 10px auto;
padding: 30px;
box-sizing: border-box;
}
.item {
position: absolute;
width: 50px;
height: 50px;
border-bottom: 2px solid #ffffff;
top: 100%;
right: -26.9px;
transform: rotate(45deg);
margin-top: -25px;
background: #de302f;
}
.container:after {
content: '';
position: absolute;
width: 50px;
height: 73px;
border-left: 2px solid #ffffff;
top: 24px;
right: -52px;
}
<div class="container">
<div class="item">
</div>
</div>
您可以像下面这样简化一下：
body {
background: #de302f;
}
.container {
--t: 2px; /* thickness */
--b: var(--t) solid #fff; /* border here */
position: relative;
max-width: 600px;
height: 50px;
border: var(--b);
border-bottom: none;
margin: 10px auto;
padding: 30px;
box-sizing: border-box;
clip-path: inset(0 0 -100vmax);
}
.container:before,
.container:after {
content: '';
position: absolute;
top: 100%;
height: 40px; /* control the height here */
right: calc(-1*var(--t));
border-right: var(--b);
}
.container:after {
width: 100%;
border-top: var(--b);
transform: skewX(30deg); /* control the angle here */
transform-origin: 0 calc(100% - var(--t));
}
<div class="container">
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
