Làm cách nào tôi có thể tạo đường viền có hình dạng bất thường này bằng CSS thuần (không có hình ảnh)?

Tôi đang cố gắng tránh sử dụng hình nền (hoặc bất kỳ giải pháp dựa trên hình ảnh nào) để tạo hiệu quả này:

Lưu ý: mũi tên màu đỏ chỉ vào đường viền trong câu hỏi. Mũi tên không nên được bao gồm trong câu trả lời của bạn.

Làm cách nào tôi có thể tạo đường viền có hình dạng bất thường này bằng CSS thuần (không có hình ảnh)? Nếu hình ảnh là không thể tránh khỏi, câu trả lời ngắn gọn và dễ đọc nhất sẽ được nâng cấp và chấp nhận.

Bạn có thể sử dụng CSS (lưu ý rằng điều này sẽ không hoạt động với các phiên bản IE cũ hơn).

Ví dụ: bạn có thể kết hợp một số hình dạng như hình chữ nhật và hai hình tam giác. Xem jsfiddle này .

HTML:

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

Và 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;
}

Bạn có thể thấy một loạt các hình dạng CSS ở đây . Hầu hết nếu không phải tất cả đều yêu cầu nhiều hơn một div, do đó, thách thức sẽ là áp dụng đường viền tối hơn.

Câu trả lời của Yisela rất chắc chắn, nhưng tôi đoán rằng tôi sẽ đưa ra giải pháp thay thế này: sử dụng đa giác hoặc URI hình ảnh với hình dạng CSS và đường dẫn clip. Đây là một hướng dẫn nhanh .

Lưu ý rằng phương pháp này sẽ hoạt động với ít trình duyệt hơn so với thủ thuật viền tam giác tại thời điểm này. Tuy nhiên, nếu bạn muốn sử dụng một hình dạng phức tạp hơn hoặc bọc văn bản của bạn thành hình dạng thì đây sẽ là cách để đi.

Một phương pháp khác cho điều này cũng có thể có hỗ trợ hạn chế là "nhúng SVG trong CSS". Tôi đã không tự mình thử điều này nhưng ý tưởng là bạn cung cấp tài nguyên hình ảnh dưới dạng url trong khai báo css cho đối tượng và bạn truyền cho nó một url thoát đúng có chứa dữ liệu.

SVG là một định dạng văn bản / xml đơn giản. Một đa giác mẫu (từ 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> 

Một ví dụ nội tuyến (nhúng) SVG (đơn giản hóa) (từ stackoverflow ):

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

Lưu ý rằng dữ liệu SVG phải được "thoát" đúng cách để sử dụng nội tuyến, điều này làm cho nó kém hấp dẫn hơn so với việc chỉ liên kết một tệp SVG.

Có một số thảo luận liên quan đến khả năng tồn tại của phương thức trong luồng được liên kết ở trên. Tôi nghĩ rằng việc nhúng một cái gì đó đơn giản như một hình tam giác đầy màu trắng là một quyết định dễ dàng cung cấp hỗ trợ. Dữ liệu định dạng SVG phức tạp nên được lưu trữ dưới dạng tệp SVG thay vì nội tuyến.

Các tệp SVG là vectơ và có thể được chia tỷ lệ theo tỷ lệ phần trăm, không giống như phương pháp "viền". Họ cũng (hiện tại) có sự hỗ trợ tốt hơn (ít nhất là không phải nội tuyến) so với phương pháp cắt đường được liệt kê. SVG, là văn bản thuần túy, thậm chí có thể được phát ra nhanh chóng bằng cách sử dụng ví dụ PHP hoặc tập lệnh phía máy chủ khác.

Nếu khu vực màu xanh của bạn trên hình ảnh là một png trong suốt và khu vực màu trắng trong suốt, thì bạn cần bao gồm html này để làm cho nó giảm bóng:

<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>

Và sử dụng css này trên hình ảnh:

.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')";
}

Đây là giải pháp đa trình duyệt hoàn hảo.