How to trim the corners of the border on css?

What method can trim the corners of the border on css. Or is it better through the canvas, but still it seems to me that without problems it would be possible to do every single thing on canvase, better on css ?? And by the way, the background is changing;

    3 answers 3

    .wrapper { position: relative; margin: 50px; width: 100px; height: 40px; line-height: 40px; font-family: Roboto, sans-serif; font-size: 16px; font-weight: bold; text-align: center; border-top: 2px solid #f00; border-bottom: 2px solid #f00; transform-origin: 50% 100% 0; transform: rotate(270deg); } .wrapper::before, .wrapper::after { position: absolute; content: ''; width: 15px; height: 27px; } .wrapper::before { left: -15px; bottom: -2px; border-left: 2px solid #f00; border-bottom: 2px solid #f00; } .wrapper::after { right: -15px; top: -2px; border-top: 2px solid #f00; border-right: 2px solid #f00; } .corner { position: absolute; width: 21px; height: 21px; transform: 50% 50% 0; transform: rotate(45deg); } .left { top: 3px; left: -11px; border-left: 2px solid #f00; } .right { bottom: 3px; right: -11px; border-right: 2px solid #f00; } 
     <div class="wrapper">ГЛАВНАЯ <div class="left corner"></div> <div class="right corner"></div> </div>

    • He wrote that there is a background, put the triangles out of pseudo-elements is not that .. In general, I decided to draw and draw on svg, because I don’t see any better - Kostya Abramkin
    • @ Kostya Abramkin firstly: there are no triangles from pseudo-elements, secondly: what’s the problem with changing the background in my example? - slippyk
    • yes thanks, misunderstood - Kostya Abramkin

    Hi, you can do it through css. Using border-radius, you can set the rounding level of each corner separately.

     border-radius: 30px 0px 30px 0px;

    Which is equivalent to

     border-top-left-radius:30px; border-top-right-radius:0; border-bottom-right-radius:30px; border-bottom-left-radius:0;

    Example https://codepen.io/whereismymind7/pen/XRXwwK

    Documentation https://www.w3schools.com/cssref/css3_pr_border-radius.asp

    • border-radius will not work, look at the image - soledar10
    • Well, it's not that at all .. border-radius disappeared right away - Kostya Abramkin
    • @ soledar10, yes, I did not notice that the corners are sharp, in this case there is a variant described here , here is an example - tuneonmymind

    Example

     * { padding: 0; margin: 0; box-sizing: border-box; } body { height: 100vh; font-size: 1.25rem; padding: 1rem; font-family: 'Segoe UI', sans-serif; background: linear-gradient(to bottom, rgba(4, 34, 66, 1) 0%, rgba(11, 93, 181, 1) 100%); } .btn { position: relative; margin: 30px 0; display: inline-block; vertical-align: top; padding: 8px 25px; color: #A6B0BB; text-transform: uppercase; text-decoration: none; -webkit-transform: rotate(-90deg) translate3d( 0, 0, 0); transform: rotate(-90deg) translate3d( 0, 0, 0); transition: .3s; } .btn:before, .btn:after, .btn>span:nth-of-type(1):before, .btn>span:nth-of-type(1):after, .btn>span:nth-of-type(2):before, .btn>span:nth-of-type(2):after { content: ''; position: absolute; background: rgba(255, 255, 255, .3); transition: .3s; } .btn:before, .btn:after { width: calc(100% - 15px); height: 2px; } .btn:before { top: 0; left: 15px; } .btn:after { bottom: 0; left: 0; } .btn>span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .btn>span:nth-of-type(1):before, .btn>span:nth-of-type(1):after { height: calc(100% - 15px); width: 2px; } .btn>span:nth-of-type(1):before { top: 15px; left: 0; } .btn>span:nth-of-type(1):after { top: 0; right: 0; } .btn>span:nth-of-type(2):before, .btn>span:nth-of-type(2):after { height: 22px; width: 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } @-moz-document url-prefix() { .btn>span:nth-of-type(2):before, .btn>span:nth-of-type(2):after { width: 2.5px; } } .btn>span:nth-of-type(2):before { top: -3px; left: 7px; } .btn>span:nth-of-type(2):after { bottom: -3px; right: 7px; } .btn:hover { color: #fff; } .btn:hover:before, .btn:hover:after, .btn:hover>span:nth-of-type(1):before, .btn:hover>span:nth-of-type(1):after, .btn:hover>span:nth-of-type(2):before, .btn:hover>span:nth-of-type(2):after { background: rgba(255, 255, 255, .8); } 
     <a href="#" class="btn"> <span></span><span></span>Button </a>