gpt4 book ai didi

css 带边框的透明三 Angular 形

转载 作者:行者123 更新时间:2023-11-28 07:20:25 25 4
gpt4 key购买 nike

是否可以像右侧图片那样设置(倾斜)三 Angular 形的样式? http://s15.postimg.org/h2vruavmz/triangle.jpg

我想倾斜它,使背景透明度为 0.5 并隐藏三 Angular 形的底部边框。

body {
background-color: #ccc;
}
.arrow_box {
position: absolute;
top: 40px;
left: 40px;
background: #fff;
/*border: 1px solid #ffffff;*/
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow_box:after {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #fff;
border-width: 20px;
margin-left: -20px;
}
.arrow_box:before {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #000;
border-width: 21px;
margin-left: -21px;
}
<div class="arrow_box"></div>

最佳答案

您目前使用的方法意味着您将无法在三 Angular 形上设置半透明的“背景”。这是因为三 Angular 形的黑色边框实际上是一个稍大的独立三 Angular 形,恰好较小的白色三 Angular 形覆盖了它的中心。如果您修改白色三 Angular 形的不透明度,那么您将只能看到黑色三 Angular 形。

这可以通过使用另一种方法来创建三 Angular 形来避免。一般原则是创建一个盒子,然后使用 transform: rotate(45deg); 将其翻转过来。在容器上使用 overflow: hidden;,您可以切掉一半框,留下一个没有底部边框的三 Angular 形。

然后您可以使用 transform: skewX(55deg); 倾斜容器,将三 Angular 形推到一侧。

body {
background-color: #ccc;
}
.arrow_box {
height: 17px;
left: 40px;
overflow: hidden;
position: absolute;
top: 40px;
transform: skewX(55deg);
width: 34px;
}
.arrow_box:after {
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid rgba(0, 0, 0, 1);
content: " ";
height: 20px;
left: 5px;
position: absolute;
top: 5px;
transform: rotate(45deg);
width: 20px;
}
<div class="arrow_box"></div>

关于css 带边框的透明三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32115855/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com