gpt4 book ai didi

html - 具有固定 Angular 对 Angular 线与 css 中的曲线

转载 作者:太空宇宙 更新时间:2023-11-04 14:56:58 25 4
gpt4 key购买 nike

你会如何绘制一条对 Angular 线,它始终具有 11° 的 Angular 并且两端固定圆 Angular 。它将用作图像的叠加层,例如以下示例:

enter image description here

灰色区域应该在上面,蓝色区域就是图像。

理想情况下,可以通过纯 CSS 或 data:image/svg+xml 作为背景图像设置样式。

可能类似于在图像顶部使用 ::after 选择器。或者甚至是将要添加到其中的内容 div 上的 ::before 选择器。例如类似于:

<div class="card">
<div class="header">
<img src="#" />
</div>
<div class="content">
<h1>Title</h1>
<p>Body copy</p>
</div>
</div>

<style>
.content:before {
content: '';
display: block;
width: 100%;
}
</style>

最佳答案

您可以部署::before::after 伪元素。

每个伪元素使用以下组合:

  • 绝对定位
  • 边框
  • 边界半径
  • 盒子阴影
  • 变换:偏斜:

div {
display:inline-block;
position: relative;
width: 256px;
height: 140px;
margin-right:32px;
background: url('/my-image.jpg') no-repeat rgb(15,150,196);
overflow: hidden;
}

div::before, div::after {
content: '';
position: absolute;
left: 0;
display: block;
width: calc(100% - 12px);
height: 100%;
border-width: 3px 6px;
border-style: solid;
border-color: rgb(178,178,178);
border-radius: 9px;
box-shadow: 36px -36px 0 36px rgb(178,178,178), -2px 2px 0 2px rgb(178,178,178);
transform: skewY(11deg);
}

div::before {
bottom: 50%;
}


div::after {
top: 50%;
box-shadow: -36px 36px 0 36px rgb(178,178,178), 2px -2px 0 2px rgb(178,178,178);
}

.with-image {
background: url('https://images.pexels.com/photos/115045/pexels-photo-115045.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') no-repeat 0 0 / 256px 140px rgb(15,150,196);
}

.with-image::before, .with-image::after {
border-color: rgb(0,127,0);
box-shadow: 36px -36px 0 36px rgb(0,127,0), -2px 2px 0 2px rgb(0,127,0);
}

.with-image::after {
box-shadow: -36px 36px 0 36px rgb(0,127,0), 2px -2px 0 2px rgb(0,127,0);
}
<div></div>
<div class="with-image"></div>

关于html - 具有固定 Angular 对 Angular 线与 css 中的曲线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40655172/

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