2016-11-17 167 views
2

您将如何绘制一条对角线,该对角线总是具有11°的角度并固定每端的圆角。它将被用作图像的重叠,如下面的例子:带有固定角度的对角线与css中的曲线

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> 
+0

那么你的建议解决方案有什么问题? – Turnip

+0

如果你可以使用SVG很好。但对于CSS + HTML来说,这很难实现,因为你需要倾斜转换,并且你会遇到文本问题等。你是否在图层上尝试了一个图像? –

回答

4

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

每个伪元件使用的组合:

  • absolute positioning
  • border
  • border-radius
  • box-shadow
  • transform: skewY

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>

+1

这似乎很好。做得好 –

1

我认为这段代码可以帮助你达成你所要做的。

.container{ 
 
    width:300px; 
 
    margin-top:30px; 
 
} 
 
.imagecontainer{ 
 
    width:100%; 
 
    height:200px; 
 
    background:blue; 
 
    transform: skew(0deg, 11deg); 
 
    border-radius:10px; 
 
    margin-bottom:4px; 
 
}
<div class="container"> 
 
    <div class="imagecontainer"></div> 
 
    <div class="imagecontainer"></div> 
 
    <div class="imagecontainer"></div> 
 
</div>

+0

这也会扭曲图像。我会想象,这不是OP想要的:https://jsfiddle.net/f5Lj3u8t/ – Turnip

+0

哦,是的!你是对的。在这种情况下,试试这个https://jsfiddle.net/f5Lj3u8t/2/ –