如何使用CSS

形状下的红色边框创建这个形状：如何使用CSS

我很努力使用CSS3，但所有的时间我没能做到这一点的形状。我也尝试添加border-bottom和border-left。见CSS代码理解我在做什么：

#trapezoid { 
 
    background: blue; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: auto; 
 
} 
 
#trapezoid:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border-top: 50px solid red; 
 
    border-left: 50px solid transparent; 
 
    margin: 50px 0px 0px -50px; 
 
    transform: rotate(0deg); 
 
} 
 
#trapezoid:after { 
 
    content: ""; 
 
    position: absolute; 
 
    border-top: 50px solid red; 
 
    border-right: 50px solid transparent; 
 
    margin: 50px 0px 0px 100px; 
 
    transform: rotate(0deg); 
 
}

<div id="trapezoid"></div>

这个CSS形状几乎接近我的要求，但我们不能在扩展区域使用的图像。请给我建议一些其他方法。 面临的挑战是，我要创建相同的布局，并在地方灰色背景的我已经表现出一定的内容

来源

2017-07-11 Amar Arya

使用SVG。除非你可以有非透明背景，目前灰色 – Justinas

也许这将有助于https://stackoverflow.com/documentation/css/2862/single-element-shapes#t=201707110651089445018 – Chiller

挑战是这样的，我必须创建相同的布局和灰色背景的地方我已经展示了一些内容（可能是滑块或其他图像） –

如果你有一个坚实的背景色试试这个

body { 
 
    background: grey; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    height: 200px; 
 
    background: url("http://lorempixel.com/1000/300/nature/3"); 
 
    background-size:cover; 
 
} 
 

 
.content { 
 
    height: 100px; 
 
    color: #fff; 
 
} 
 

 
.shape { 
 
    position: relative; 
 
    height: 100px; 
 
    overflow:hidden; 
 
} 
 

 
.shape:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 40%; 
 
    height: 100%; 
 
    background: grey; 
 
    top: 0; 
 
    transform: skew(30deg); 
 
    left: -10%; 
 
} 
 

 
.shape:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 40%; 
 
    height: 100%; 
 
    background: grey; 
 
    top: 0; 
 
    transform: skew(-30deg); 
 
    right: -10%; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    Contents 
 
    </div> 
 
    <div class="shape"></div> 
 
</div>

来源

2017-07-11 07:01:58 Akshay

尽管你可以用一个div来做到这一点。 – VilleKoo

@VilleKoo是的，我使用了两个（孩子），以便内容可以添加和样式（垂直居中也是可能的） – Akshay

这个技巧非常好，但是如果我想在灰色背景中显示一些其他信息？ **挑战**是这样的，我必须创建相同的布局和灰色背景的地方我已经展示了一些内容 –

使用:before和:after在底部放置2个三角形

#trapezoid { 
 
width: 200px; 
 
height: 100px; 
 
background-color: red; 
 
position: relative; 
 
} 
 
#trapezoid:before { 
 
content: ""; 
 
width: 0; 
 
height: 0; 
 
border-style: solid; 
 
border-width: 0 30px 30px 30px; 
 
border-color: transparent transparent white transparent; 
 
display: block; 
 
transform: rotate(-135deg); 
 
position: absolute; 
 
bottom: -5px; 
 
left: -20px; 
 
} 
 
#trapezoid:after { 
 
content: ""; 
 
width: 0; 
 
height: 0; 
 
border-style: solid; 
 
border-width: 0 30px 30px 30px; 
 
border-color: transparent transparent white transparent; 
 
display: block; 
 
transform: rotate(135deg); 
 
position: absolute; 
 
bottom: -5px; 
 
right: -20px; 
 
}

<div id="trapezoid"></div>

来源

2017-07-11 07:04:57 Gerard

我认为这样做会有效果。希望它会适合你。

.main-box{ 
 
    background:#ddd; 
 
    width:300px; 
 
    height:100px; 
 
    display:inline-block; 
 
    position:relative; 
 
    text-align:center; 
 
} 
 
.main-box:after{ 
 
    content:''; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 70px solid #999; 
 
    border-right: 70px solid transparent; 
 
    position:absolute; 
 
    left:0; 
 
    bottom:0; 
 
} 
 
.main-box:before{ 
 
    content:''; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 70px solid #999; 
 
    border-left: 70px solid transparent; 
 
    position:absolute; 
 
    right:0; 
 
    bottom:0; 
 
}

<div class="main-box"> #trial</div>

来源

2017-07-11 07:06:49 weBBer

-1

更好地利用一个PNG图像作为背景，如果可能的。如果这不是选项，请在两端创建两个div，显示内联并旋转它们以创建斜坡，请注意它们的大小。另一种可能性可以在之前的答案中使用，但如果导航栏在顶部粘滞，则看起来不太好。该边框将隐藏它下面的内容。

来源

2017-07-11 07:07:05

根据所需的browser support，您可以使用夹路径：

#trapezoid { 
 
    background: url(https://upload.wikimedia.org/wikipedia/commons/8/83/Jho_Arce_User_Profile_Image.jpg) no-repeat; 
 
    background-size: cover; 
 
    height: 100px; 
 
    width: 200px; 
 
    margin: auto; 
 
    -webkit-clip-path: polygon(100% 0, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0 0); 
 
    clip-path: polygon(100% 0, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0 0) 
 
} 
 

 
body { 
 
    background: silver; 
 
}

<div id="trapezoid"></div>

来源

2017-07-11 07:12:33

如何使用CSS

回答

相关问题