如何使用CSS显示弯曲(圆形)的底部形状?

时间:2019-03-22 06:49:19

标签: html css twitter-bootstrap

如何使用CSS显示弯曲(圆形)的底部形状?如下图所示:

<style type="text/css">
	.contact-section{background-color:#5ff;background-repeat:no-repeat;background-size:auto;min-height:200px;position:relative}.contact-section .left-shape{position:absolute;height:200px;background-color:#fff;bottom:-100px;width:80%;transform:rotate(20deg);left:-250px}.contact-section .right-shape{position:absolute;height:200px;background-color:#fff;bottom:-100px;width:80%;transform:rotate(-20deg);right:-250px}.standard-top-padding{padding-top:100px}.standard-bottom-padding{padding-bottom:100px}.text-center{text-align:center}
</style>

<section class="standard-top-padding standard-bottom-padding contact-section px-0 d-flex align-items-center">
	<span class="left-shape"></span>
	<div class="container">
		<div class="text-center">
			<h4 class="section-heading-h4 mb-1">Stop Wasting Your Time And Contact Us For More Information</h4>
	  	<p class="section-text-light col-8 mx-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
	  	<a href="#" class="standard-button">Learn more</a>
  	</div>
  </div>
  <span class="right-shape"></span>
</section>

样本图片:

0 个答案:

没有答案