<分区>
html - 无法获取 :after to create right triangle shape
标签 html css css-shapes
我正在尝试使用 css 创建一个背景，就像图中包含的黄色一样。
我花了一些时间尝试使用 :after 但我无法将三 Angular 形放到正确的位置，也无法达到正确的宽度。
如果我可以使用 css，我真的不想使用图像。
<aside class="quickcontactform">
<div class="quickcontactformheader">
<h2>Need help evicting a tenant?</h2>
<h3>Don't Delay</h3>
<p>Please complete the form below</p>
</div>
<p>'ere is more content sire</p>
<p>a be a pleased with it I am</p>
</aside></div>
还有一些CSS
.quickcontactform {
width:350px;
float:right;
background:#fff;border-radius:10px;
overflow:hidden;
}
.quickcontactformheader {
background:#f0cf35;
position:relative;
}
.quickcontactformheader:after {
content:'';
position:absolute;
bottom:0px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
最佳答案
检查我的 fiddle :https://jsfiddle.net/r6er318z/
我稍微修改了你的CSS
HTML
<aside class="quickcontactform">
<div class="quickcontactformheader">
<h2>Need help evicting a tenant?</h2>
<h3>Don't Delay</h3>
<p>Please complete the form below</p>
</div>
<p>'ere is more content sire</p>
<p>a be a pleased with it I am</p>
</aside>
CSS
.quickcontactform {
width:350px;
float:right;
background:#fff;
border-radius:10px;
overflow:hidden;
}
.quickcontactformheader {
background:#f0cf35;
position:relative;
}
.quickcontactformheader:after {
content:'';
position:absolute;
top:100%;
width: 0;
height: 0;
border-left: 175px solid transparent;
border-right: 175px solid transparent;
border-top: 30px solid #f0cf35;
}
关于html - 无法获取 :after to create right triangle shape，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30455277/