我需要在工具提示上打一个带有箭头的框,但是我不能使用伪元素,因为:
这是示例:
.box {
margin: 60px 0 0 0;
width: 250px;
height: 50px;
background-color: rgba(255, 144, 89, 0.5);
border-radius: 5px;
position: relative;
border: 2px solid #ff6e26;
}
.box:after,
.box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: rgba(255, 144, 89, 0.5);
border-width: 10px;
margin-left: -10px;
}
.box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #ff6e26;
border-width: 12px;
margin-left: -12px;
}
<div class="box"></div>
https://codepen.io/Masoudm/pen/qgvJGX
如您所见,当我使背景透明时,不适用于箭头,因为我已经在其后面使用:: before作为边框了。我想知道是否还有另一种方法可以让我保持盒子的大小动态。
更新:
盒子应该是这样的(顶部弯曲的线条除外)
答案 0 :(得分:1)
基于此previous answer,我将稍微调整代码以使其具有透明的背景。有两个主要技巧。伪元素的一半着色以避免与主元素相交,并避免在主元素上使用渐变来创建边框顶部并为伪元素创建孔:
body {
margin:0;
background-image:linear-gradient(to right,yellow,pink);
}
.box {
border: 2px solid red;
border-top:transparent; /*make border-top transparent*/
margin: 50px;
height: 50px;
position:relative;
/* Use gradient to mimic the border top with a transparent gap */
background:
linear-gradient(red,red) left top /calc(50% - 10px*1.414) 2px,
linear-gradient(red,red) right top/calc(50% - 10px*1.414) 2px,
rgba(0,255,0,0.4);
background-repeat:no-repeat;
}
.box:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-top: 2px solid red;
border-left: 2px solid red;
top: -11px;
left: calc(50% - 11px);
transform: rotate(45deg);
background:linear-gradient(-45deg,transparent 50%,rgba(0,255,0,0.4) 50%);
}
<div class="box">
</div>
答案 1 :(得分:0)
target = !p // condition
? roots // true part
: (children[p] || (children[p] = [])); // else part
* {
box-sizing: border-box;
font-family: inherit;
}
html {
font-size: 62.25%;
}
body {
padding: 50px;
}
.outter {
width: 200px;
height: 100px;
position: relative;
}
.box {
padding: 20px;
width: 100%;
height: 100%;
background: rgba(255, 68, 0, 0.568);
border: 3px solid orangered;
border-radius: 5px;
clip-path: polygon(0 0,45% 0,45% 10px,calc(45% + 15px) 10px,calc(45% + 15px) 0,100% 0,100% 100%,0 100%,0 0)
}
.arrow {
width: 15px;
height: 8px;
background: rgba(255, 68, 0, 0.568);
transform: translate(-67%, 100%);
position: absolute;
left: 50%;
bottom: 98%;
}
.arrow::after {
border: 3px solid transparent;
border-left-color: orangered;
border-top-color: orangered;
border-right: 0px solid transparent;
border-bottom: 0px solid transparent;
width: 11px;
height: 11px;
position: absolute;
left: 0;
bottom: 34%;
content: '';
transform: rotate(45deg);
background: linear-gradient(134deg,rgba(255, 68, 0, 0.56) 0%,rgba(255, 68, 0, 0.56) 50%,transparent 50%, transparent 100%);
}