ฉันจะสร้างเส้นขอบรูปทรงที่ไม่สม่ำเสมอนี้ด้วย CSS บริสุทธิ์ (ไม่มีภาพ) ได้อย่างไร

ฉันพยายามหลีกเลี่ยงการใช้ภาพพื้นหลัง (หรือวิธีแก้ปัญหาภาพ) เพื่อสร้างสิ่งนี้อย่างมีประสิทธิภาพ:

หมายเหตุ: ลูกศรสีแดงเพิ่งชี้ไปที่เส้นขอบที่เป็นปัญหา ลูกศรไม่ควรรวมอยู่ในคำตอบของคุณ

ฉันจะสร้างเส้นขอบรูปทรงที่ไม่สม่ำเสมอนี้ด้วย CSS บริสุทธิ์ (ไม่มีภาพ) ได้อย่างไร หากรูปภาพไม่สามารถหลีกเลี่ยงได้คำตอบที่สั้นและกระชับที่สุดจะได้รับการอัปเดตและยอมรับ

คุณสามารถใช้ CSS (โปรดทราบว่าสิ่งนี้จะไม่ทำงานกับ IE เวอร์ชันเก่ากว่า)

ตัวอย่างเช่นคุณสามารถรวมรูปร่างบางอย่างเช่นสี่เหลี่ยมผืนผ้าและสามเหลี่ยมสองรูป ดูjsfiddleนี้

HTML:

<div id="square"></div>
<div class="align">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
</div>

และ CSS:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-left: 100px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}

.align div {
    float: left;
}

คุณสามารถเห็นความหลากหลายของCSS รูปร่างที่นี่ ส่วนใหญ่หากไม่ทุกคนต้องมีมากกว่าหนึ่ง div ดังนั้นความท้าทายจะใช้เส้นขอบที่มืดกว่า

คำตอบของ Yisela นั้นแข็งแกร่ง แต่ฉันคิดว่าฉันจะเสนอทางเลือกนี้: การใช้รูปหลายเหลี่ยมหรือ URI รูปภาพที่มีรูปร่าง CSS และเส้นทางคลิป นี่เป็นรวดเร็วกวดวิชา

โปรดทราบว่าวิธีนี้จะใช้งานได้กับเบราว์เซอร์น้อยลงกว่าเคล็ดลับเส้นขอบรูปสามเหลี่ยมในขณะนี้ อย่างไรก็ตามหากคุณต้องการใช้รูปร่างที่ซับซ้อนมากขึ้นหรือตัดข้อความของคุณเป็นรูปร่างนี่จะเป็นวิธีที่จะไป

วิธีการอื่นสำหรับสิ่งนี้ซึ่งอาจมีการสนับสนุนที่ จำกัด คือ "ฝัง SVG ใน CSS" ฉันไม่ได้ลองตัวเอง แต่ความคิดก็คือคุณให้ทรัพยากรรูปภาพเป็น url ภายในการประกาศ css สำหรับวัตถุและคุณผ่าน url ที่ถูกต้องซึ่งมีข้อมูล

SVG เป็นรูปแบบข้อความ / xml ธรรมดา ตัวอย่างรูปหลายเหลี่ยม (จากw3schools ):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg> 

ตัวอย่างแบบอินไลน์ (แบบฝัง) SVG (ย่อมาจาก) (จากstackoverflow ):

url("data:image/svg+xml;utf8, <svg></svg>");

โปรดทราบว่าข้อมูล SVG จะต้อง "หลบหนี" อย่างเหมาะสมสำหรับการใช้แบบอินไลน์ซึ่งทำให้มีความน่าสนใจน้อยกว่าการเชื่อมโยงไฟล์ SVG เล็กน้อย

มีการอภิปรายเกี่ยวกับความมีชีวิตของวิธีการในหัวข้อที่เชื่อมโยงข้างต้น ฉันคิดว่าการฝังสิ่งที่ง่ายเหมือนรูปสามเหลี่ยมสีขาวเป็นการตัดสินใจที่ง่ายหากมีการสนับสนุน ข้อมูลรูปแบบ SVG ที่ซับซ้อนควรเก็บไว้เป็นไฟล์ SVG แทนที่จะเป็นแบบอินไลน์

ไฟล์ SVG เป็นแบบเวกเตอร์และสามารถปรับสัดส่วนได้ร้อยละซึ่งแตกต่างจากวิธี "เส้นขอบ" พวกเขายัง (ปัจจุบัน) ได้รับการสนับสนุนที่ดีกว่า (ไม่ใช่แบบอินไลน์อย่างน้อย) กว่าวิธีการคลิปที่ระบุ SVG ซึ่งเป็นข้อความธรรมดาสามารถปล่อยได้แม้ขณะใช้งานเช่น PHP หรือสคริปต์ฝั่งเซิร์ฟเวอร์อื่น ๆ

หากพื้นที่สีฟ้าของคุณบนรูปภาพเป็น png แบบโปร่งใสและพื้นที่สีขาวเป็นแบบโปร่งใสคุณจะต้องรวม html นี้เพื่อทำให้เงา:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

และใช้ CSS นี้ในภาพ:

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

นี่เป็นโซลูชันข้ามเบราว์เซอร์ที่สมบูรณ์แบบ