gpt4 book ai didi

javascript - 如何在不使用 :after? 的情况下在 div 上创建三 Angular 形

转载 作者:太空宇宙 更新时间:2023-11-03 21:13:12 25 4
gpt4 key购买 nike

我想用 CSS 创建以下样式。

enter image description here

下面的代码工作正常:

.my-class:after {
content: " ";
position: absolute;
top: 0;
right: -16px;
width: 0;
height: 0;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 17px solid $explainStageTailBkColor;
z-index: 2;
transition: border-color 0.2s ease;
}

我正在使用 reactjs 并且我需要在运行时设置代码。由于 React 不支持更新伪元素样式,因此我必须为此使用常规 dom。如何将常规 dom 制作成三 Angular 形样式?

最佳答案

您可以通过将类与 position:absolute 一起使用

我在下面发布了一个示例

希望对你有帮助

.my-class {
position: relative;
width: 150px;
height: 20px;
background: tomato;
}

.corner {
position: absolute;
right: -20px;
top: 0;
border-left: 10px solid tomato;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
<div class="my-class">
<span class="corner"></span>
</div>

关于javascript - 如何在不使用 :after? 的情况下在 div 上创建三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44622388/

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