How can I create this custom shape in a way that can contain text, using CSS?
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.
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>