How to make a block with a beveled side like in the picture?

enter image description here

Of course, it would be possible with the help of a pseudo-element, with the transform: scewX() property transform: scewX() but the background of the block is semi-transparent and, in total, the overlap is obtained.

And another question: is it possible to make such a border on CSS:

enter image description here

Or is it just a picture?

    2 answers 2

    What a strange desire to do everything through CSS? Such things need to be done with the help of images. And what makes you think that it is impossible to push the pseudo-element out of the frame of the parent element?

     .bg { padding: 20px; background: #37f; margin-top: 50px; } .text { color: #b00; font-size: 15px; background: rgba(255, 255, 255, .5); padding: 15px; margin-right: 50px; position: relative; } .text::after { content: ''; position: absolute; left: 100%; top: 0; width: 0; border-top: 47px solid rgba(255, 255, 255, .5); border-right: 50px solid transparent; } 
     <div class="bg"> <div class="text"> Блаблабла </div> </div>

    Regarding the second question: Suma, do not descend, what border? Do you have a principle not to use images? Of course, you can use some border-image property, but even in this case, you will need a picture. Do not complicate the layout, all this can be done with simple methods.

    • 2
      Did not guess the pseudo-element Border to do .... did through the width and height .... Thank you. For the second, yes, of course, the picture is simpler and faster, I thought maybe there are some hacks ..... - pepel_xD

    In css there is a border-image , but it is not supported everywhere yet.

    An example of a bevel using a pseudo element:

     .hh { background: rgba(0, 0, 0, .5); width: 300px; position: relative; height: 2em; } .hh:after { box-sizing: border-box; position: absolute; content: ''; width: 2em; height: 100%; left: 100%; top: 0; border: 1em solid rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.5) transparent transparent rgba(0, 0, 0, 0.5); } 
     <div class="hh">покупайте наших слонов</div>