css - 如何添加一个三角形边框(垂直)尊重一侧的背景图像?
问题描述
我有一个用 CSS 制作的垂直横幅,我想创建两个区域。
分隔应呈三角形。一侧有背景,“三角形”应保留该背景。
在图像中更好地解释;-)
我正要这样做,但形状一直持续到最后......我被卡住了。
.box {
background-image:
linear-gradient(195deg, transparent 70%, #000 70%, #000 71%, #fff 71%),
linear-gradient(165deg, transparent 70%, #000 70%, #000 71%, #fff 71%),
url(https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=2700&q=80);
background-position: top, center;
background-size: 250px 100%, cover;
background-repeat: no-repeat;
}
<div class="box">
some text here<br> more text
</div>
解决方案
您可以像这样调整代码:
.box {
padding: 50px 30px;
height:300px;
width:100px;
text-align: right;
background-image:
linear-gradient(200deg,transparent 70%,#000 70%,#000 71%,#fff 71%),
linear-gradient(160deg,transparent 70%,#000 70%,#000 71%,#fff 71%),
url(https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=2700&q=80);
background-position:bottom left,bottom right,center;
background-size:50% 600px,50% 600px,cover;
background-repeat:no-repeat;
display:flex;
align-items:flex-end;
}
<div class="box">
some text here<br> more text
</div>
推荐阅读
- c++ - 检查当前对象是否在 C++ 中的同一类中被销毁
- reactjs - 尝试有多个输入元素
- pandas - 如何在 Panda Dataframe 中应用列表理解?
- reactjs - 如何在 React 中使用通过箭头函数定义为常量的嵌套组件?
- javascript - 使用 JavaScript ,重新加载后如何在页面上保留用户输入?
- php - 从 MySQL 显示数据到 PHP 页面问题
- c# - 在 IEnumerable 上使用 AsParallel - 它是否有任何并行性的好处?
- ruby-on-rails - 如何返回包含每个所有者名称的文件名数组的哈希?
- c - 在 C 中输入这个三角形的高度时打印帕斯卡三角形
- c++ - 等到请求完成 Qt