我遇到这种情况:requireAll()
我需要使用container
内容覆盖(覆盖)triangle
的边框。
我该怎么办?
代码:
<div class="container">
<div class="triangle">How are you ?</div>
</div>
.container {
border: 1px solid gray;
position: relative;
width: 50vw;
height: 100px;
background: #fff;
overflow: hidden;
}
.triangle {
background-color: red;
display: inline-block;
transform: translateX(-50%) rotate(45deg) translateX(50%) rotate(-90deg);
transform-origin: center top;
box-shadow: 0px -50px 0px 50px red;
}
答案 0 :(得分:1)
您可以使用box-shadow
作为边框。
.container {
position: relative;
width: 50vw;
height: 100px;
background: #fff;
overflow: hidden;
box-shadow: inset 0 0 0 1px gray;
}
.triangle {
background-color: red;
display: inline-block;
transform: translateX(-50%) rotate(45deg) translateX(50%) rotate(-90deg);
transform-origin: center top;
box-shadow: 0px -50px 0px 50px red;
}
<div class="container">
<div class="triangle">How are you ?</div>
</div>
答案 1 :(得分:0)
您可以使用伪来执行此操作,然后只需移动带有负边距的triangle
。
我也将overflow: hidden
移到triangle
,否则就不会覆盖边框。
注意,我为此示例使用了较粗的边框,因此可以轻松看到它的工作原理
.container {
border: 5px solid gray;
position: relative;
width: 50vw;
height: 80px;
background: #fff;
}
.triangle {
display: inline-block;
height: calc(100% + 10px); /* 10px = border size * 2 */
margin: -5px 0 0 -5px; /* move element left/top = border size */
width: 100%;
overflow: hidden;
}
.triangle::before {
content: attr(data-text);
display: inline-block;
background-color: red;
transform: translateX(-50%) rotate(45deg) translateX(50%) rotate(-90deg);
transform-origin: center top;
box-shadow: 0px -50px 0px 50px red;
}
&#13;
<div class="container">
<div class="triangle" data-text="How ?"></div>
</div>
<br>
<div class="container">
<div class="triangle" data-text="How are you ?"></div>
</div>
&#13;
如果你想做的不仅仅是伪,你当然可以添加一个元素,这里用span
在这个样本中,我使用了相对位置而不是负边距,以显示另一种方式。
.container {
border: 5px solid gray;
position: relative;
width: 50vw;
height: 80px;
background: #fff;
}
.triangle {
display: inline-block;
position: relative;
left: -5px; /* move element left = border size */
top: -5px; /* move element top = border size */
height: calc(100% + 10px); /* 10px = border size * 2 */
width: 100%;
overflow: hidden;
}
.triangle span {
display: inline-block;
background-color: red;
transform: translateX(-50%) rotate(45deg) translateX(50%) rotate(-90deg);
transform-origin: center top;
box-shadow: 0px -50px 0px 50px red;
}
&#13;
<div class="container">
<div class="triangle">
<span>How ?</span>
</div>
</div>
<br>
<div class="container">
<div class="triangle">
<span>How are you ?</span>
</div>
</div>
&#13;