Css形状创建曲线波 [英] Css Shape Creation Curved Wave

问题描述

这个网站检查它我发现它跨度包装
锚标签以及svg标签

 < a href =/class =home> 
< svg viewBox =0 0 100 25class =shape-tab> 
< use xlink：href =＃shape-tab>< / use> 
< / svg> 
 
< span> Blog< / span>< / a> 
  

解决方案

这是一个关于折叠的最终演示角落 http://nicolasgallagher.com/pure-css-folded-corner-effect / demo /

，并且以下代码是如何创建它们的：

  .note {
 position：relative; 
 width：30％; 
 padding：1em 1.5em; 
 margin：2em auto; 
 color：#fff; 
 background：＃97C02F; 
 overflow：hidden; 
} 
 
 .note：before {
 content：; 
 position：absolute; 
 top：0; 
 right：0; 
 border-width：0 16px 16px 0; 
 border-style：solid; 
 border-color：#fff #fff＃658E15＃658E15; 
 background：＃658E15; 
 -webkit-box-shadow：0 1px 1px rgba（0,0,0,0.3），-1px 1px 1px rgba（0,0,0,0.2）; 
 -moz-box-shadow：0 1px 1px rgba（0,0,0,0.3），-1px 1px 1px rgba（0,0,0,0.2）; 
 box-shadow：0 1px 1px rgba（0,0,0,0.3），-1px 1px 1px rgba（0,0,0,0.2）; 
 / * Firefox 3.0损坏限制* / 
 display：block; width：0; 
} 
 
 .note.rounded {
 -moz-border-radius：5px 0 5px 5px; 
 border-radius：5px 0 5px 5px; 
} 
 
 .note.rounded：before {
 border-width：8px; 
 border-color：#fff #fff transparent transparent; 
 -moz-border-radius：0 0 0 5px; 
 border-radius：0 0 0 5px; 
} 
  

要创建曲线波形效果，您可以使用此代码

 < div id =wave/> 
< div /> 
 
 
 #wave {
 position：relative; 
 height：70px; 
 width：600px; 
 background：＃e0efe3; 
} 
 
 #wave：before {
 content：; 
 display：block; 
 position：absolute; 
 border-radius：100％50％; 
 width：340px; 
 height：80px; 
 background-color：white; 
 right：-5px; 
 top：40px; 
} 
 
 #wave：after {
 content：; 
 display：block; 
 position：absolute; 
 border-radius：100％50％; 
 width：300px; 
 height：70px; 
 background-color：＃e0efe3; 
 left：0; 
 top：27px; 
} 
  

来实现曲线。

要查看边框半径如何创建形状和效果的现场演示，请检查此链接，并调整每个角落看到它在行动。
http://www.cssmatic.com/border-radius

This is what i have got so far After after checking out tutorial

• I want know how curved effect is generated on divs the only question that i found near to what i was looking for was At here at stackoverlow but that too dint help
• How folded edge effect is created on as in the above picture

Css

#MenuShape{
   height:50px;
   background-color:orange; 
   width:200px;
    position:relative;
    text-align:center;
    left:100px;

}
#MenuShape:after{
        content:"";
   position: absolute;
    width: 0;
   height: 0;
   left:200px;
  border-top: 50px solid transparent;
    border-left: 100px solid orange;
    border-bottom: 0px solid transparent;

}
#MenuShape:before{
        content:"";
   position: absolute;
    width: 0;
   height: -50;
   left:-100px;
  border-top: 50px solid transparent;
    border-right: 100px solid orange;
    border-bottom: 0px solid transparent;

}

HTML

<div id="MenuShape"  >
    sachin

</div>

https://css-tricks.com/ this the site on inspecting it i found its span wrapped anchor tag along with svg tag

  <a href="/" class="home">
    <svg viewBox="0 0 100 25" class="shape-tab">
      <use xlink:href="#shape-tab"></use>
    </svg>

  <span>Blog</span></a>

Click here to see the unexpected behaviour it works fine in codepen

解决方案

Here is a final demo on the folded corners http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/

and the following code is how you can create them:

    .note {
  position: relative;
  width: 30%;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: #97C02F;
  overflow: hidden;
}

.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #fff #fff #658E15 #658E15;
  background: #658E15;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  /* Firefox 3.0 damage limitation */
  display: block; width: 0;
}

.note.rounded {
  -moz-border-radius: 5px 0 5px 5px;
  border-radius: 5px 0 5px 5px;
}

.note.rounded:before {
  border-width: 8px;
  border-color: #fff #fff transparent transparent;
  -moz-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
}

To create a curved wave effect you can use this code

    <div id="wave"/>
<div/>


#wave {
  position: relative;
  height: 70px;
  width: 600px;
  background: #e0efe3;
}

#wave:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100% 50%;
    width: 340px;
    height: 80px;
    background-color: white;
    right: -5px;
    top: 40px;
}

#wave:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100% 50%;
    width: 300px;
    height: 70px;
    background-color: #e0efe3;
    left: 0;
    top: 27px;
}

to achieve the curve youll need to inverse where it starts. Follow the same demo just reverse you values.

To see a live demonstration of how border radius can create the shapes and effects you want check out this link and adjust each corner to see it in action. http://www.cssmatic.com/border-radius

这篇关于Css形状创建曲线波的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！