CSS:具有凹凸角度的div

时间:2016-02-02 13:58:37

标签: html css radius curves

我必须在不使用图像的情况下创建具有此形状的div。 背景必须是透明的,这就是问题......

有可能吗?

祝你好运

see image here

1 个答案:

答案 0 :(得分:0)

参见示例fiddle

代码

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="294.12px" height="69.481px" viewBox="0 0 294.12 69.481" enable-
 background="new 0 0 294.12 69.481" xml:space="preserve">
 <path fill-rule="evenodd" clip-rule="evenodd" fill="#00AEEF" 
 d="M43.2,0.001c69.264,0,138.528,0,207.72,0
 c21.312-0.216,19.944,69.048,43.2,69.48c-97.992,0-196.056,0-
 294.12,0C18.648,69.266,22.752-0.358,43.2,0.001z"/>
 </svg>