सीएसएस के साथ लहराती आकृति


80

मैं सीएसएस के साथ इस छवि को फिर से बनाने की कोशिश कर रहा हूं:

सुडौल आकार

मुझे इसे दोहराने की आवश्यकता नहीं होगी। यह वही है जो मैंने शुरू किया था लेकिन इसमें सिर्फ एक सीधी रेखा है:

#wave {
  position: absolute;
  height: 70px;
  width: 600px;
  background: #e0efe3;
}
<div id="wave"></div>


2
अगर आप इसे आकार के लिए सिर्फ एसवीजी के उपयोग के लिए सीएसएस के साथ बनाना चाहते हैं
iKamy

क्या आपका कोई विचार था? कुछ भी है कि आप की कोशिश की?
डेविड फ्रिट्स

1
सिर्फ एक पृष्ठभूमि छवि का उपयोग क्यों न करें? कई बार सीएसएस की शक्ति का दुरुपयोग या "लाभ नहीं" करना सबसे अच्छा होता है जब एक साधारण .Png छवि आपको 20 बाइट्स का खर्च देगी।
प्रोफाइलटविस्ट

1
डबल घुमावदार आकार के लिए, आप इस प्रश्न की जांच कर सकते हैं: डबल घुमावदार आकार
वेब-टिकी

जवाबों:


81

मुझे यकीन नहीं है कि यह आपकी आकृति है लेकिन यह करीब है - आप मूल्यों के साथ खेल सकते हैं:

https://jsfiddle.net/7fjSc/9/

#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;
}
<div id="wave"></div>


1
यह एक निर्धारित चौड़ाई के बिना अलग हो जाता है। मुझे हमेशा चौड़ाई = 100% चाहिए। हालांकि अच्छी नौकरी।
एमएच

4
एक भद्दा अंतर है जहाँ दोनों छद्म तत्व मिलते हैं।
फाबिएन स्नूवर्ट

90

मुझे लगता है कि आप जैसा चाहते हैं, वैसी आकृति बनाने का यह सही तरीका है। एसवीजी संभावनाओं का उपयोग करके, और आकार को संवेदनशील बनाए रखने के लिए एक कंटेनर।

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}
<div class="container">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:red;"></path>
  </svg>
</div>


1
हालाँकि आपके लिए एसवीजी के साथ आकृतियाँ और चेतन आकार लेना संभव है, लेकिन ज्यादातर लोग अपनी एसवीजी फ़ाइलों को कोरल या इलस्ट्रेटर जैसे वेक्टर आधारित सॉफ़्टवेयर से निर्यात करते हैं और HTML फ़ाइल में सम्मिलित करते हैं, फिर आप CSS के साथ अधिक स्टाइल कर सकते हैं या JS या SVG के साथ नोड्स में हेरफेर कर सकते हैं। पुस्तकालय। और यही एसवीजी के लिए प्रकरण क्योंकि यह सीएसएस में ड्राइंग के साथ कठिनाइयों का समाधान माना जाता है
iKamy

मैंने अपने उत्तर में इस बात का निर्माण किया कि उदाहरण को अधिक यथार्थवादी बनाने के लिए दो डिवीजनों को जोड़कर, एसवीजी को अनचाहे मार्जिन से छुटकारा पाने के लिए, और सीएसएस समाधान के पक्ष में इनलाइन एसवीजी को हटा दें।
फैबिएन स्नूवर्ट

43

मेरा कार्यान्वयन html में svg तत्व का उपयोग करता है और मैंने आपके द्वारा इच्छित तरंग बनाने के लिए एक जनरेटर भी बनाया है:

https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections

<div style="height: 150px; overflow: hidden;">
  <svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
    <path d="M0.00,92.27 C216.83,192.92 304.30,8.39 500.00,109.03 L500.00,0.00 L0.00,0.00 Z" style="stroke: none;fill: #e1efe3;"></path>
  </svg>
</div>

https://jsfiddle.net/1b8L7nax/5/


जनरेटर के लिए पुरालेख लिंक: web.archive.org/web/20180810082435/https://smooth.ie/blogs/news/…
निगेल

8
पहले कभी नहीं हुआ, लेकिन मैं वास्तव में लहर जनरेटर के लिए इस जवाब को बढ़ाने के लिए लॉग इन किया। मुझे एसवीजी से नफरत है और आपने मुझे इतना समय बचा लिया!
गोरेडेक्स

22

100% चौड़ाई के साथ ऊपर आधारित मेरा शुद्ध सीएसएस कार्यान्वयन। आशा है कि इससे सहायता मिलेगी!


2
कोड का गहराई से निरीक्षण किए बिना, यह वर्तमान में स्वीकृत उत्तर से बेहतर लगता है, जो मेरे लिए (फ़ायरफ़ॉक्स 61.0a1) बीच में कुछ सीधे क्षैतिज पिक्सेल प्रदर्शित करता है।
सेबेस्टियन साइमन

रंग बदलें और आप देखेंगे :)
PVerme

18

मुझे थॉमसए का जवाब पसंद है, लेकिन दो तलाक को अलग करने के लिए इस्तेमाल की जा रही लहर के साथ अधिक यथार्थवादी संदर्भ चाहते थे। इसलिए मैंने एक और पूर्ण डेमो बनाया, जहां विभाजक एसवीजी दो डिवीजनों के बीच पूरी तरह से तैनात हो जाता है।

सीएसएस में सीएसएस लहराती विभक्त

अब मुझे लगा कि इसे और आगे ले जाना अच्छा रहेगा। क्या होगा अगर हम इनलाइन एसवीजी की आवश्यकता के बिना CSS में यह सब कर सकते हैं ? अतिरिक्त मार्कअप से बचने के लिए बिंदु। यहाँ है कि मैंने यह कैसे किया:

दो सरल <div>:

/** CSS using pseudo-elements: **/

#A {
  background: #0074D9;
}

#B {
  background: #7FDBFF;
}

#A::after {
  content: "";
  position: relative;
  left: -3rem;
  /* padding * -1 */
  top: calc( 3rem - 4rem / 2);
  /* padding - height/2 */
  float: left;
  display: block;
  height: 4rem;
  width: 100vw;
  background: hsla(0, 0%, 100%, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 70 500 60' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='500' height='500' style='stroke: none; fill: %237FDBFF;' /%3E%3Cpath d='M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z' style='stroke: none; fill: %230074D9;'%3E%3C/path%3E%3C/svg%3E");
  background-size: 100% 100%;
}


/** Cosmetics **/

* {
  margin: 0;
}

#A,
#B {
  padding: 3rem;
}

div {
  font-family: monospace;
  font-size: 1.2rem;
  line-height: 1.2;
}

#A {
  color: white;
}
<div id="A">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec quam tincidunt, iaculis mi non, hendrerit felis. Nulla pretium lectus et arcu tempus, quis luctus ex imperdiet. In facilisis nulla suscipit ornare finibus. …
</div>

<div id="B" class="wavy">… In iaculis fermentum lacus vel porttitor. Vestibulum congue elementum neque eget feugiat. Donec suscipit diam ligula, aliquam consequat tellus sagittis porttitor. Sed sodales leo nisl, ut consequat est ornare eleifend. Cras et semper mi, in porta nunc.</div>

डेमो वेवी विभक्त (सीएसएस छद्म तत्वों के साथ अतिरिक्त मार्कअप से बचने के लिए)

यह इनलाइन SVG की तुलना में स्थिति के लिए थोड़ा पेचीदा था लेकिन साथ ही साथ काम करता है। (सीएसएस कस्टम गुण या पूर्व प्रोसेसर चर का उपयोग करने के लिए ऊंचाई और पढ़ने के लिए आसान रखने के लिए उपयोग कर सकते हैं।)

रंगों को संपादित करने के लिए, आपको URL-एनकोडेड SVG को स्वयं संपादित करना होगा।

एसवीजी में अवांछित स्थानों से छुटकारा पाने के लिए एक बदलाव परviewBox (पहले डेमो की तरह) ध्यान दें । (दूसरा विकल्प एक अलग एसवीजी तैयार करना होगा।)

यहां ध्यान देने वाली एक और बात यह है कि इसे दोनों दिशाओं में फैलाने के लिए background-sizeसेट किया 100% 100%गया है।


18

हाल ही में गेट वेव्स नामक एक भयानक उपकरण पेश किया गया था जहां आप यूआई से अपनी खुद की तरंगें बना सकते हैं और फिर इसे एसवीजी प्रारूप में निर्यात कर सकते हैं। यह https://getwaves.io/ वेबसाइट पर जाने और इसका आनंद लेने जितना आसान है!

संपादित करें:

हाल ही में मैंने एक नया टूल भी खोजा है - https://shapedivider.app/


1
इसने मुझे बहुत सी सी एस सी परेशानी से बचाया। धन्यवाद!
लिज

खुशी के साथ मदद करने के लिए :)
डैनियल Danielecki

3

यहाँ एक और हैयह करने तरीका है :) यह अवधारणा एक तरफ के रूप में लहर के साथ क्लिप-पथ बहुभुज बनाने के लिए है।

यह दृष्टिकोण काफी लचीला है। आप स्थिति (बाएं, दाएं, ऊपर या नीचे) को बदल सकते हैं जिसमें लहर दिखाई देती है, तरंग फ़ंक्शन को किसी भी फ़ंक्शन (टी) में बदल देती है जो [0,1] पर मैप करता है)। बहुभुज का उपयोग आकृति-बाहर के लिए भी किया जा सकता है, जो पाठ को तरंग के चारों ओर प्रवाहित करता है जब 'बाएं' या 'सही' अभिविन्यास में होता है।

अंत में, एक उदाहरण जिसे आप अनसुना कर सकते हैं जो लहर को एनिमेट करता है।

 

function PolyCalc(f /*a function(t)  from [0, infinity) => [0, 1]*/, 
                  s, /*a slice function(y, i) from y [0,1] => [0, 1], with slice index, i, in [0, n]*/
									w /*window size in seconds*/,
                  n /*sample size*/,
                  o /*orientation => left/right/top/bottom - the 'flat edge' of the polygon*/ 
                  ) 
{
	this.polyStart = "polygon(";
  this.polyLeft = this.polyStart + "0% 0%, "; //starts in the top left corner
  this.polyRight = this.polyStart + "100% 0%, "; //starts in the top right corner
  this.polyTop = this.polyStart + "0% 0%, "; // starts in the top left corner
  this.polyBottom = this.polyStart + "0% 100%, ";//starts in the bottom left corner
  
  var self = this;
  self.mapFunc = s;
  this.func = f;
  this.window = w;
  this.count = n;
  var dt = w/n;  

  switch(o) {
    case "top":
      this.poly = this.polyTop; break;
    case "bottom":
      this.poly = this.polyBottom; break;
  	case "right":
    	this.poly = this.polyRight; break;
  	case "left":
  	default:
  		this.poly = this.polyLeft; break;
    }
    
  this.CalcPolygon = function(t) {
  	var p = this.poly;
    for (i = 0; i < this.count; i++) {
      x = 100 * i/(this.count-1.0);
      y = this.func(t + i*dt);
      if (typeof self.mapFunc !== 'undefined')
      	y=self.mapFunc(y, i);
      y*=100;
      switch(o) {
        case "top": 
          p += x + "% " + y + "%, "; break;
        case "bottom":
          p += x + "% " + (100-y) + "%, "; break;
      	case "right":
        	p += (100-y) + "% " + x + "%, "; break;
      	case "left":
        default:
        	p += y + "% " + x + "%, "; break;          
      }
    }
    
    switch(o) { 
      case "top":
        p += "100% 0%)"; break;
      case "bottom":
        p += "100% 100%)";
        break;
    	case "right":
      	p += "100% 100%)"; break;
    	case "left":
      default:
      	p += "0% 100%)"; break;
    }
    
    return p;
  }
};

var text = document.querySelector("#text");
var divs = document.querySelectorAll(".wave");
var freq=2*Math.PI; //angular frequency in radians/sec
var windowWidth = 1; //the time domain window which determines the range from [t, t+windowWidth] that will be evaluated to create the polygon
var sampleSize = 60;
divs.forEach(function(wave) {
  var loc = wave.classList[1];

  var polyCalc = new PolyCalc(
	  function(t) { //The time domain wave function
  	  return (Math.sin(freq * t) + 1)/2; //sine is [-1, -1], so we remap to [0,1]
    },
    function(y, i) { //slice function, takes the time domain result and the slice index and returns a new value in [0, 1]  
      return MapRange(y, 0.0, 1.0, 0.65, 1.0);  //Here we adjust the range of the wave to 'flatten' it out a bit.  We don't use the index in this case, since it is irrelevant
    },
    windowWidth, //1 second, which with an angular frequency of 2pi rads/sec will produce one full period.
    sampleSize, //the number of samples to make, the larger the number, the smoother the curve, but the more pionts in the final polygon
    loc //the location
  );
  
    var polyText = polyCalc.CalcPolygon(0);
    wave.style.clipPath = polyText;
    wave.style.shapeOutside = polyText;
    wave.addEventListener("click",function(e) {document.querySelector("#polygon").innerText = polyText;});
  });

function MapRange(value, min, max, newMin, newMax) {
  return value * (newMax - newMin)/(max-min) + newMin;
}

//Animation - animate the wave by uncommenting this section
//Also demonstrates a slice function which uses the index of the slice to alter the output for a dampening effect.
/*
var t = 0;
var speed = 1/180;

var polyTop = document.querySelector(".top");

var polyTopCalc = new PolyCalc(
	  function(t) {
  	  return (Math.sin(freq * t) + 1)/2;
    },
    function(y, i) {       
      return MapRange(y, 0.0, 1.0, (sampleSize-i)/sampleSize, 1.0);
    },
    windowWidth, sampleSize, "top"
  );

function animate() {
		var polyT = polyTopCalc.CalcPolygon(t);    
    t+= speed;
    polyTop.style.clipPath = polyT;    
    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
*/
div div {
  padding:10px;
  /*overflow:scroll;*/
}

.left {
  height:100%;
  width:35%;
  float:left;
}

.right {
  height:200px;
  width:35%;
  float:right;
}

.top { 
  width:100%;
  height: 200px;  
}

.bottom {
  width:100%;
  height:200px;
}

.green {
  background:linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); 
} 

.mainContainer {
  width:100%;
  float:left;
}

#polygon {
  padding-left:20px;
  margin-left:20px;
  width:100%;
}
<div class="mainContainer">

  <div class="wave top green">
    Click to see the polygon CSS
  </div>
  
  <!--div class="wave left green">
  </div-->
  <!--div class="wave right green">
  </div-->  
  <!--div class="wave bottom green"></div-->  
</div>
<div id="polygon"></div>

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.