倾斜的div边框透明度 [英] Slanted div border transparency
问题描述
所以，我知道如何使用 :after 和边框为现代布局制作倾斜的 div.
但是，我想知道您是否可以使用它通过透明度裁剪出 div 的一部分?例如，假设我有一排带有背景图像的卡片，我想要对这些图像产生倾斜的效果.但是，这里的斜面只是一个透明层，页面(不是卡片的背景图像)会从中渗出.
使用 border-color: (color) transparent transparent 将不起作用.任何一个倾斜方向也不会相反.不知道如何解决这个问题，或者是否有可能.
.row >div {背景: url("https://www.google.com/photos/about/static/images/google.svg");背景尺寸:封面；背景位置:50% 50%；背景重复:不重复；高度:200px；}身体{背景:橙色；}.row >div:第一个孩子::之后{内容: "";位置:绝对；右:0；宽度:0；高度:0；边框样式:实心；顶部:0；边框宽度:90px 0 0 100vw；边框颜色:黑色透明透明；}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div></div>简而言之，您无法使用 border 修剪元素的内容.
HTML border 是元素边缘的一个绘制表面，它的形状非常有限.您可以使用边框做的唯一巧妙的技巧是使用图像并让中间部分自动重复.
而且，当然，您可以使用 border-radius 使边框变圆.
但是如果你想要一个非矩形，你需要使用 HTML 元素或伪元素.
但是，一个可以修剪元素内容，使用剪辑路径:
.row>div {背景: url(https://www.google.com/photos/about/static/images/google.svg) 不重复 50% 50%/cover;填充底部:33%；剪辑路径:多边形(0 0, 100% 42%, 100% 100%, 0 100%)；}身体 {背景: url(https://picsum.photos/800/600) 不重复 50% 50%/cover;高度:100vh；}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container-fluid"><div></div>请注意浏览器支持目前处于88%.如果您想要更多，最好在您选择的图像编辑器中剪切文本并将结果保存为 .
有关剪裁和遮罩的更多信息，我推荐以下文章:
So, I know how to make slanted divs using :after and borders for modern layouts.
But, I'm wondering if you can use this to crop out a portion of a div through transparency? For example, lets say I had a row of cards with background images and I wanted the slanted effect on these. but, the slant here is just a transparency layer to where the page (not background image of the cards) would bleed through.
Using border-color: (color) transparent transparent won't work. Nor will the reverse for either slanted direction. Not sure how to go about this or if it's even possible.
.row > div {
background: url("https://www.google.com/photos/about/static/images/google.svg");
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 200px;
}
body{ background: orange;}
.row > div:first-child::after {
content: "";
position: absolute;
right: 0;
width: 0;
height: 0;
border-style: solid;
top: 0;
border-width: 90px 0 0 100vw;
border-color: black transparent transparent;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='row'>
<div></div>
</div>
In short, you can't trim the element's content using border.
The HTML border is a painted surface at the edge of the element and it's pretty limited regarding shape. The only neat trick you can do with border is using images and get the middle section to auto-repeat.
And, of course, you can round borders, using border-radius.
But if you want a non-rectangular you need to use either HTML elements or pseudo-elements.
However, one can trim element contents, using clip-path:
.row>div {
background: url(https://www.google.com/photos/about/static/images/google.svg) no-repeat 50% 50% /cover;
padding-bottom: 33%;
clip-path: polygon(0 0, 100% 42%, 100% 100%, 0 100%);
}
body {
background: url(https://picsum.photos/800/600) no-repeat 50% 50% /cover;
height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class='row'>
<div></div>
</div>
</div>
Do note browser support is currently sitting at 88%. If you want more, you're better off cutting your text in the image editor of your choice and saving the result as <svg>.
For more on clipping and masking I recommend these articles:
这篇关于倾斜的div边框透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
