मैं शीर्ष पर नीचे की लहर प्रभाव भी चाहूंगा! क्या कोई मुझे दिखा सकता है कि यह कैसे किया जाता है।

प्रभाव शीर्ष पर समान दिखना चाहिए जहां इसे शीर्ष पर और साथ ही नीचे रखा गया है।

मैं वास्तव में लहरों के साथ एक छवि को ऊपर और नीचे तोड़ने की कोशिश कर रहा हूं, ताकि आंशिक रूप से ऊपर और नीचे की छवि तरंगों में गायब हो जाए।

Open Image

@import url(https://fonts.googleapis.com/css?family=Montserrat);

//variables
$background: #FFF;

body {
  background-color: $background;
  color: #ffF;
  font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1em;
  line-height: 2em;
  margin: 0;
  padding: 0;
}

.wave{
  text-align: center;
  background: linear-gradient(to bottom, sandybrown, chocolate);
  height: 50px;
  position: relative;
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat-x;
  height: 10px;
  background-size: 20px 20px;
  background-image: radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}
.wave::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat-x;
  height: 15px;
  background-size: 40px 20px;
  background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
}
.content {
  color: #333;
  font-size: 0.8em;
  padding: 1em;
}
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>CSS Rounded Borders</title>
</head>
<body>
  <div class="wave">I'm wavy</div>
  
  <div class="content">
    With two special pseudo elements (before and after) and the power of repeating css3 radial gradients this ruffle like waves are done much easier than before without an image file.
  </div>
  
</body>
</html>
css
-6
Dileep P 4 सितंबर 2019, 06:47

1 उत्तर

सबसे बढ़िया उत्तर

आप एक भाग छद्म तत्वों का उपयोग करके और दूसरा कई पृष्ठभूमि का उपयोग करके कर सकते हैं:

.wave{
  text-align: center;
  background:
    radial-gradient(circle at 10px 15px, white 12px, transparent 13px) left 0 bottom -5px/40px 20px repeat-x,
    radial-gradient(circle at 10px -5px, transparent 12px, white 13px) left 0 bottom -10px/20px 20px repeat-x,
    linear-gradient(to bottom, sandybrown, chocolate);
  padding:40px 0;
  position: relative;
}
.wave::before,
.wave::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  background-repeat: repeat-x;
  transform:scaleY(-1);
}
.wave::before{
  height: 10px;
  background-size: 20px 20px;
  background-image: radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}
.wave::after{
  height: 15px;
  background-size: 40px 20px;
  background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
}
  <div class="wave">I'm wavy</div>
0
Temani Afif 4 सितंबर 2019, 09:03