HTML & CSS Diamond-Shaped Containers [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed yesterday.
Improve this question
I have tried multiple ways, but I’ve been running into issues attempting to make a container with diamond shaped edges on either side with the corner rounded, as well as another one with the diamond shape inverted. Similar to my sketch:
Optimally, the solution would only need HTML & CSS, with a different color border and fill. I would definitely be open to alternative solutions if that would include SVG, for example.
Thanks!
I have tried to create a mask with SVGs, but I could not find a way to add a border and a separate fill, as well as containing text inside it, and there were scale issues too (I’d like it only to scale horizontally, not vertically when width changes.)

Answer 1

You can achieve this using the ::before and ::after psuedo-elements in CSS relatively easily. The second one (with non-inverted triangles) is slightly less verbose than the first example, but both are achievable using a single HTML element and some creative CSS.
Please note that you might need to modify some of the pixel dimensions to suit your needs, but the following should achieve what you need:
.label {
background: red;
border: 2px solid #000;
color: #fff;
display: inline-block;
font-family: sans-serif;
margin: 0 30px;
padding: 10px 50px;
position: relative;
text-transform: uppercase;
}
.label::before,
.label::after {
aspect-ratio: 1/1;
background-color: #fff;
border: 2px solid #000;
content: '';
display: block;
height: 28px;
position: absolute;
overflow: hidden;
transform: rotate(45deg);
top: 4px;
}
.label::before {
border-bottom: none;
border-left: none;
left: -16px;
}
.label::after {
border-top: none;
border-right: none;
right: -16px;
}
.label--inverse::before,
.label--inverse::after {
background: inherit;
border: inherit;
}
.label--inverse::before {
border-top: none;
border-right: none;
left: -17px;
}
.label--inverse::after {
border-left: none;
border-bottom: none;
right: -17px;
}
<span class="label">Text</span>
<span class="label label--inverse">Text</span>