gpt4 book ai didi

css - 是否可以使用伪元素创建 Angular 切割?

转载 作者:行者123 更新时间:2023-11-28 17:06:47 26 4
gpt4 key购买 nike

我创建了一个 fiddle 来更好地展示我想问的问题。 angle crop of pseudo element

这是一张显示所需结果的图片:

enter image description here

li.active::after {
content: '';
position: absolute;
background: #fff;
width: 10em;
height: 100%;
height: 20em;
top: 5%;
left: 15%;
transform: rotate(-75deg);
}

我想要做的是让 li active 类显示一个彩色背景,底部有一个裁剪 Angular 。

  • 它应该适应链接的长度
  • 需要看穿背景
  • 在链接中包含 Angular 部分
  • 有求必应

这在纯 css 中可行吗?

最佳答案

我发现在纯 CSS 中执行此操作的最佳方法是使用具有线性渐变的 background-image 属性,从一种颜色变为透明。

您可以使用元素本身的颜色作为 mask ,也可以使用背景。不同之处在于您定义渐变 Angular 和渐变颜色的方式。

在这个例子中,我使用了你的对象颜色来获得效果: http://jsfiddle.net/948ud6f7/

您会注意到它非常参差不齐,而且不像使用图像那样清晰。我还不确定解决这个问题的方法,但不同的浏览器会以不同的方式呈现边缘,所以这至少为您提供了一个起点。

祝你好运!

关于css - 是否可以使用伪元素创建 Angular 切割?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30176863/

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