Search code examples
csssasscss-selectorscss-shapes

Create a Shape ONLY with CSS

I need to create this custom shape with only CSS3.

divider of sections

Need to be with CSS, not svg. I was trying to use the snippets of this link: Wave (or shape?) with border on CSS3 but i don't know how to manipulate shapes properly.

Also can be only the center shape! I'm testing with this pen: https://codepen.io/Blumenkranz/pen/vYEeLjr

@mixin push--auto {
    margin: { 
        left: auto;
        right: auto;
    }
}
@mixin pseudo($display: block, $pos: absolute, $content: "") {
  content: $content;
  display: $display;
  position: $pos;
}

.section {
  width: 100%;
  height: 50vh;
  background: $blue-dark;
  position:relative;
   &::after, &::before {
    @include pseudo;
    @include  push--auto;
    bottom: -46px; 
    left: 35%;
    width: 250px; 
    height: 150px;
    background: $blue-dark;
   border-radius: 100%;

}
}
Solution

  • I don't know why you want to make this using only css, as svg would be much simpler, but here you go. I made an approximation of your shape, which you can easily adjust, using a similar technique to the one you linked.

    1

    Here is the code. I'm using display flex on the body and margin auto on the container to position it in the center of the page for display purposes. 

    body {
	display: flex;
	height: 100vh;
}
.container {
	margin: auto;
	position: relative;
}
.shape {
	width: 200px;
	height: 200px;
	background-color: #157995;
	transform: rotate(45deg) skew(-10deg,-10deg);
	clip-path: polygon(68% 100%, 100% 68%, 100% 100%);
	border-radius: 15%;
}
.bar {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 12px;
	background-color: #157995;
}
.container::before, .container::after {
	content: "";
	position: absolute;
	width: 50px;
	height: 20px;
	background-color: white;
	z-index: 1;
	bottom: 0px;
}
.container::before {
	left: 12.4px;
	border-top-right-radius: 50%;
	transform: skew(55deg);
}
.container::after {
	right: 12.4px;
	border-top-left-radius: 50%;
	transform: skew(-55deg);
}
    <!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="bar"></div>
      <div class="shape"></div>
    </div>
  </body>
</html>