Search code examples
htmlcsscss-shapes

CSS custom shape

please I want to create something like this via CSS.

like this

Just want to use only CSS to create this custom shape with border radius. Any ideas please?

Solution

  • This is a shape seemed to the shape you need, you have to make some tricks with the borders and transform, also you need use :after and :before selectors to build this kind of shapes.

    #diamond-shield {
	width: 0;
	height: 40;
	border: 50px solid transparent;
	border-bottom: 50px solid orange;
	position: relative;
	top: -10px;
    left: 250px;
    transform-origin: 0% 0%;
    transform: rotate(82deg)
}
#diamond-shield:after {
	content: '';
	position: absolute;
	left: -50px; top: 50px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 370px solid orange;
}

#chevron {
  position: relative;
  text-align: center;
  padding: 8px;
  top: -9px;
  margin-bottom: 6px;
  left:164px;
  height: 0px;
  width: 60px;
  transform-origin: 0% 0%;
  transform: rotate(-98deg);
}

#chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: white;
  transform: skew(0deg, 44deg);
}
#chevron:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: white;
  transform: skew(0deg, -44deg);
}
    <div id="diamond-shield"></div>
<div id="chevron"></div>

    Also you could watch some examples here: https://css-tricks.com/examples/ShapesOfCSS/