Article From:https://segmentfault.com/q/1010000012148041

The part of the left or right side of the picture is hidden, showing only the sharp corners.

Answer 0:
        <meta charset="utf-8">
        <title>No title document < /title>< /head>< body>< style>Body{maRgin:0; padding:0;}.demo{width:200px; height:100px; background:#ddd; position:relative; bordEr-radius:8px; margin:20px Auto;}.demo:before{content:''; position:absolute; margin:0; PaddIng:0; font-size:0; line-height:0; border-width:10px; border-color:#ddd; border-style:dashed; border-left-Width:0; border-right-style:solid; border-top-color:transparent; border-bottom-color:transparent; displaY:inline-block; left:-10px; top:50%; margin-top:-10px;}< /style>< div class= "dEmo "> < /div>< /body>< /html>

Answer 1:

It’s not good to divide it into two.

Answer 2:

It is written in an inverted triangle. The color of the triangle is the same as the background color of the message. The triangle is positioned to the middle of the sideline, and that effect is achieved. Http://www.layui.com/demo/lay… There are examples here.

Answer 3:

These are good pure CSS implementation
It can be referred to as follows:
I hope to help you

Answer 4:

It should be a SVG with a sharp corner, and then use itclip-pathThat’s right. It’s all hack

Answer 5:

Or use SVG.

Answer 6:

Generally speaking, hack: before: write a triangle instead.
It’s better to do it with SVG

Leave a Reply

Your email address will not be published. Required fields are marked *