Search code examples
csssvgcss-shapes

How to cut corner from rounded shape?


How can I create this custom shape in a way that can contain text, using CSS?

CSS rounded shape cut corner

I designed it in illustrator, and when I export this as a "svg", the svg code looks like:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="258.3px" height="47.6px" viewBox="0 0 258.3 47.6" enable-background="new 0 0 258.3 47.6" xml:space="preserve">
</svg>

But it's not working in the page.


Solution

  • You can also use a single gradient :

    .notch {
      width: 258.3px;
      height: 47.6px;
      border-radius: 30px 0 0;
      background:linear-gradient(45deg,transparent 12px , #8DC73F 12px);
    }
    body {
      background:rgb(93, 93, 93)
    }
    <div class="notch"></div>