57 Beautiful CSS Shapes

view code

HTML

<div class="shape-1"></div>

CSS

.shape-1
{
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #333;
}

view code

HTML

<div class="shape-2"></div>

CSS

.shape-2
{
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid #333;
}

view code

HTML

<div class="shape-3"></div>

CSS

.shape-3
{
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-right: 50px solid #333;
  border-bottom: 25px solid transparent;
}

view code

HTML

<div class="shape-4"></div>

CSS

.shape-4
{
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-left: 50px solid #333;
  border-bottom: 25px solid transparent;
}

by sharkcoder.com view code

HTML

<div class="shape-5"></div>

CSS

.shape-5
{
  width: 33px;
  height: 33px;
  border: 2px solid #333;
  border-left: 0;
  border-top: 0;
  transform: rotate(225deg);
}

by sharkcoder.com view code

HTML

<div class="shape-6"></div>

CSS

.shape-6
{
  width: 33px;
  height: 33px;
  border: 2px solid #333;
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
}

view code

HTML

<div class="shape-7"></div>

CSS

.shape-7
{
  width: 33px;
  height: 33px;
  border: 2px solid #333;
  border-left: 0;
  border-top: 0;
  transform: rotate(135deg);
}

view code

HTML

<div class="shape-8"></div>

CSS

.shape-8
{
  width: 33px;
  height: 33px;
  border: 2px solid #333;
  border-left: 0;
  border-top: 0;
  transform: rotate(315deg);
}

view code

HTML

<div class="shape-9"></div>

CSS

.shape-9
{
  width: 25px;
  height: 25px;
  border: 10px solid #333;
  border-left: 0;
  border-top: 0;
  transform: rotate(225deg);
}

view code

HTML

<div class="shape-10"></div>

CSS

.shape-10
{
  width: 25px;
  height: 25px;
  border: 10px solid #333;
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
}

view code

HTML

<div class="shape-11"></div>

CSS

.shape-11
{
  width: 25px;
  height: 25px;
  border: 10px solid #333;
  border-left: 0;
  border-top: 0;
  transform: rotate(135deg);
}

view code

HTML

<div class="shape-12"></div>

CSS

.shape-12
{
  width: 25px;
  height: 25px;
  border: 10px solid #333;
  border-left: 0;
  border-top: 0;
  transform: rotate(315deg);
}

view code

HTML

<div class="shape-13"></div>

CSS

.shape-13
{
            /* Modify size here: */
  --size: 50px;
  position: relative;
  width: var(--size);
  height: calc(var(--size) * 0.66);
  background: #333;
  border-radius: 10px;
}

.shape-13:after
{
  content: '';
            position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: calc(var(--size) * 0.13) solid transparent;
  border-bottom-color: #333;
  border-top: 0;
  margin-left: calc(var(--size) * 0.13 * -1);
  margin-top: calc(var(--size) * 0.13 * -1);
}

view code

HTML

<div class="shape-14"></div>

CSS

.shape-14
{
            /* Modify size here: */
  --size: 50px;
  position: relative;
  width: var(--size);
  height: calc(var(--size) * 0.66);
  background: #333;
  border-radius: 10px;
}

.shape-14:after
{
  content: '';
            position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: calc(var(--size) * 0.13) solid transparent;
  border-top-color: #333;
  border-bottom: 0;
  margin-left: calc(var(--size) * 0.13 * -1);
  margin-bottom: calc(var(--size) * 0.13 * -1);
}

view code

HTML

<div class="shape-15"></div>

CSS

.shape-15
{
            /* Modify size here: */
  --size: 50px;
  position: relative;
  width: var(--size);
  height: calc(var(--size) * 0.66);
  background: #333;
  border-radius: 10px;
}

.shape-15:before
{
  content: '';
            position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: calc(var(--size) * 0.13) solid transparent;
  border-right-color: #333;
  border-left: 0;
  margin-top: calc(var(--size) * 0.13 * -1);
  margin-left: calc(var(--size) * 0.13 * -1);
}

view code

HTML

<div class="shape-16"></div>

CSS

.shape-16
{
            /* Modify size here: */
  --size: 50px;
  position: relative;
  width: var(--size);
  height: calc(var(--size) * 0.66);
  background: #333;
  border-radius: 10px;
}

.shape-16:after
{
  content: '';
            position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: calc(var(--size) * 0.13) solid transparent;
  border-left-color: #333;
  border-right: 0;
  margin-top: calc(var(--size) * 0.13 * -1);
  margin-right: calc(var(--size) * 0.13 * -1);
}

by Kit MacAllister view code

HTML

<div class="shape-17"></div>

CSS

.shape-17
{
            /* Modify size here: */
  --size: 50px;
  --half-size: calc(var(--size) / 2);
  position: relative;
  display: block;
  color: #333;
  width: 0px;
  height: 0px;
  border-right: var(--half-size) solid transparent;
  border-bottom: calc(var(--half-size) * 0.7) solid #333;
  border-left: var(--half-size) solid transparent;
  transform: rotate(35deg);
}

.shape-17:before
{
  border-bottom: calc(var(--half-size) * 0.8) solid #333;
  border-left: calc(var(--half-size) * 0.3) solid transparent;
  border-right: calc(var(--half-size) * 0.3) solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: calc(var(--half-size) * 0.45 * -1);
  left: calc(var(--half-size) * 0.65 * -1);
  display: block;
  content: '';
            transform: rotate(-35deg);
}

.shape-17:after
{
  position: absolute;
  display: block;
  color: #333;
  top: calc(var(--half-size) * 0.03);
  left: calc(var(--half-size) * -1.05);
  width: 0px;
  height: 0px;
  border-right: var(--half-size) solid transparent;
  border-bottom: calc(var(--half-size) * 0.7) solid #333;
  border-left: var(--half-size) solid transparent;
  transform: rotate(-70deg);
  content: '';
}

by Nicolas Gallagher view code

HTML

<div class="shape-18"></div>

CSS

.shape-18
{
            /* Modify size here: */
  --size: 50px;
  position: relative;
  width: var(--size);
  height: calc(var(--size) * 0.3);
}

.shape-18:before,
          .shape-18:after
{
  position: absolute;
  content: "";
            left: calc(var(--size) * 0.55);
  top: 0;
  width: calc(var(--size) * 0.55);
  height: calc(var(--size) * 0.85);
  background: #333;
  border-radius: calc(var(--size) * 0.55) calc(var(--size) * 0.55) 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.shape-18:after
{
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

by Temani Afif view code

HTML

<div class="shape-19"></div>

CSS

.shape-19
{
  display: inline-block;
  width: 50px;
  aspect-ratio: 1;
  border-image: radial-gradient(#333 69%,#0000 70%) 84.5% fill/100%;
  clip-path: polygon(-41% 0,50% 91%, 141% 0);
}

by Temani Afif view code

HTML

<div class="shape-20"></div>

CSS

.shape-20
{
  width: 50px;
  display: inline-block;
  -webkit-mask: radial-gradient(circle at 60% 65%, red 64%, transparent 65%) top left,
               radial-gradient(circle at 40% 65%, red 64%, transparent 65%) top right,
               linear-gradient(to bottom left, red 43%,transparent 43%) bottom left,
               linear-gradient(to bottom right,red 43%,transparent 43%) bottom right;
  -webkit-mask-size: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask: radial-gradient(circle at 60% 65%, red 64%, transparent 65%) top left,
               radial-gradient(circle at 40% 65%, red 64%, transparent 65%) top right,
               linear-gradient(to bottom left, red 43%,transparent 43%) bottom left,
               linear-gradient(to bottom right,red 43%,transparent 43%) bottom right;
  mask-size: 50% 50%;
  mask-repeat: no-repeat;
  background: linear-gradient(red,blue);
}

.shape-20::before
{
  content: '';
            display: block;
  padding-top: 100%;
}

by Alan Johnson view code

HTML

<div class="shape-21"></div>

CSS

.shape-21
{
  background: #333;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
}

.shape-21:before,
          .shape-21:after
{
  content: "";
            position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: #333;
}

.shape-21:before
{
  transform: rotate(30deg);
}

.shape-21:after
{
  transform: rotate(60deg);
}

by Alan Johnson view code

HTML

<div class="shape-22"></div>

CSS

.shape-22
{
  background: #333;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  transform: rotate(20deg);
}

.shape-22:before
{
  content: "";
            position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: #333;
  transform: rotate(135deg);
}

by Joseph Silber view code

HTML

<div class="shape-23"></div>

CSS

.shape-23
{
  width: 0;
  height: 0;
  border: 25px solid transparent;
  border-bottom-color: #333;
  position: relative;
  top: -25px;
}

.shape-23:after
{
  content: '';
            position: absolute;
  left: -25px;
  top: 25px;
  width: 0;
  height: 0;
  border: 25px solid transparent;
  border-top-color: #333;
}

by Alexander Futekov view code

HTML

<div class="shape-24"></div>

CSS

.shape-24
{
            /* Modify size here: */
  --size: 50px;
  --quarter-size: calc(var(--size) / 4);
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  border-width: 0 var(--quarter-size) var(--quarter-size) var(--quarter-size);
  height: 0;
  width: calc(var(--size) / 2);
  box-sizing: content-box;
  position: relative;
  margin: 0 0 calc(var(--size) / 2) 0;
}

.shape-24:after
{
  content: "";
            position: absolute;
  top: var(--quarter-size);
  left: calc(var(--quarter-size) * -1);
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  border-width: calc(var(--size) * 0.7) calc(var(--size) / 2) 0 calc(var(--size) / 2);
}

view code

HTML

<div class="shape-25"></div>

CSS

.shape-25
{
  width: 19px;
  height: 33px;
  border: 2px solid #333;
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
}

view code

HTML

<div class="shape-26"></div>

CSS

.shape-26
{
  width: 19px;
  height: 33px;
  border: 10px solid #333;
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
}

by Astrit view code

HTML

<div class="shape-27"></div>

CSS

.shape-27
{
  position: relative;
  width: 50px;
  height: 38.6px;
  border-left: 3px solid transparent;
  border-bottom: 3px solid;
}

.shape-27,
          .shape-27::before
{
  display: block;
  box-sizing: border-box;
  border-right: 3px solid transparent;
}

.shape-27::before
{
  content: "";
            position: absolute;
  width: 45px;
  height: 45px;
  border-left: 3px solid;
  border-top: 3px solid;
  border-bottom: 3px solid transparent;
  transform: rotate(45deg) skew(10deg,10deg);
  left: -1px;
  bottom: -25.5px;
}

by Omid Rasouli view code

HTML

<div class="shape-28"></div>

CSS

.shape-28
{
  width: 0;
  height: 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-top: 50px solid #333;
  border-radius: 50%;
}

by Kaya Basharan view code

HTML

<div class="shape-29"></div>

CSS

.shape-29
{
  background: #333;
  height: 50px;
  position: relative;
  width: 8px;
}

.shape-29:after
{
  background: #333;
  content: "";
            height: 8px;
  left: -21px;
  position: absolute;
  top: 21px;
  width: 50px;
}

by Josh Rodgers view code

HTML

<div class="shape-30"></div>

CSS

.shape-30
{
  background: #333;
  display: inline-block;
  height: 27.5px;
  position: relative;
  width: 50px;
}

.shape-30:before
{
  border-bottom: 17.5px solid #333;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  content: "";
            height: 0;
  left: 0;
  position: absolute;
  top: -17.5px;
  width: 0;
}

by Alexander Futekov view code

HTML

<div class="shape-31"></div>

CSS

.shape-31
{
  width: 50px;
  box-sizing: content-box;
  height: 25px;
  background: #fff;
  border-color: #333;
  border-style: solid;
  border-width: 2px 2px 26px 2px;
  border-radius: 100%;
  position: relative;
}

.shape-31:before
{
  content: "";
            position: absolute;
  top: 50%;
  left: 0;
  background: #fff;
  border: 9.4px solid #333;
  border-radius: 100%;
  width: 6.25px;
  height: 6.25px;
  box-sizing: content-box;
}

.shape-31:after
{
  content: "";
            position: absolute;
  top: 50%;
  left: 50%;
  background: #333;
  border: 9.4px solid #fff;
  border-radius: 100%;
  width: 6.25px;
  height: 6.25px;
  box-sizing: content-box;
}

by CSS-Tricks view code

HTML

<div class="shape-32"></div>

CSS

.shape-32
{
  width: 50px;
  height: 50px;
  background: #333;
  position: relative;
}

.shape-32:before
{
  content: "";
            width: 20px;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 15px solid #333;
  border-left: 15px solid #fff;
  border-right: 15px solid #fff;
}

.shape-32:after
{
  content: "";
            width: 20px;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 15px solid #333;
  border-left: 15px solid #fff;
  border-right: 15px solid #fff;
}

view code

HTML

<div class="shape-33"></div>

CSS

.shape-33
{
  width: 50px;
  height: 38px;
  border-radius: 50%;
  background: #333;
}

by CSS-Tricks view code

HTML

<div class="shape-34"></div>

CSS

.shape-34
{
  width: 0px;
  height: 0px;
  border-right: 29px solid transparent;
  border-top: 29px solid #333;
  border-left: 29px solid #333;
  border-bottom: 29px solid #333;
  border-top-left-radius: 29px;
  border-top-right-radius: 29px;
  border-bottom-left-radius: 29px;
  border-bottom-right-radius: 29px;
}

by Vlad Zinculescu view code

HTML

<div class="shape-35"></div>

CSS

.shape-35
{
            /* Modify size here: */
  --block-size: 5px;
  box-shadow: 0 0 0 var(--block-size) #333,
            0 var(--block-size) 0 var(--block-size) #333,
            calc(var(--block-size) * -2.5) calc(var(--block-size) * 1.5) 0 calc(var(--block-size) * .5) #333,
            calc(var(--block-size) * 2.5) calc(var(--block-size) * 1.5) 0 calc(var(--block-size) * .5) #333,
            calc(var(--block-size) * -3) calc(var(--block-size) * -3) 0 0 #333,
            calc(var(--block-size) * 3) calc(var(--block-size) * -3) 0 0 #333,
            calc(var(--block-size) * -2) calc(var(--block-size) * -2) 0 0 #333,
            calc(var(--block-size) * 2) calc(var(--block-size) * -2) 0 0 #333,
            calc(var(--block-size) * -3) calc(var(--block-size) * -1) 0 0 #333,
            calc(var(--block-size) * -2) calc(var(--block-size) * -1) 0 0 #333,
            calc(var(--block-size) * 2) calc(var(--block-size) * -1) 0 0 #333,
            calc(var(--block-size) * 3) calc(var(--block-size) * -1) 0 0 #333,
            calc(var(--block-size) * -4) 0 0 0 #333,
            calc(var(--block-size) * -3) 0 0 0 #333,
            calc(var(--block-size) * 3) 0 0 0 #333,
            calc(var(--block-size) * 4) 0 0 0 #333,
            calc(var(--block-size) * -5) var(--block-size) 0 0 #333,
            calc(var(--block-size) * -4) var(--block-size) 0 0 #333,
            calc(var(--block-size) * 4) var(--block-size) 0 0 #333,
            calc(var(--block-size) * 5) var(--block-size) 0 0 #333,
            calc(var(--block-size) * -5) calc(var(--block-size) * 2) 0 0 #333,
            calc(var(--block-size) * 5) calc(var(--block-size) * 2) 0 0 #333,
            calc(var(--block-size) * -5) calc(var(--block-size) * 3) 0 0 #333,
            calc(var(--block-size) * -3) calc(var(--block-size) * 3) 0 0 #333,
            calc(var(--block-size) * 3) calc(var(--block-size) * 3) 0 0 #333,
            calc(var(--block-size) * 5) calc(var(--block-size) * 3) 0 0 #333,
            calc(var(--block-size) * -2) calc(var(--block-size) * 4) 0 0 #333,
            calc(var(--block-size) * -1) calc(var(--block-size) * 4) 0 0 #333,
            var(--block-size) calc(var(--block-size) * 4) 0 0 #333,
            calc(var(--block-size) * 2) calc(var(--block-size) * 4) 0 0 #333;
  background: #333;
  width: var(--block-size);
  height: var(--block-size);
  overflow: hidden;
}

by Omid Rasouli view code

HTML

<div class="shape-36"></div>

CSS

.shape-36
{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 9px 9px 0 0 #333;
  margin-left: -25px;
  margin-top: -25px;
}

by Zoe Rooney view code

HTML

<div class="shape-37"></div>

CSS

.shape-37
{
  width: 50px;
  height: 50px;
  box-sizing: content-box;
  padding-top: 15px;
  position: relative;
  background: #333;
}

.shape-37:after
{
  content: "";
            position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 13px solid #fff;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

view code

HTML

<div class="shape-38"></div>

CSS

.shape-38
{
  width: 0;
  height: 0;
  border-top: 50px solid #333;
  border-right: 50px solid transparent;
}

view code

HTML

<div class="shape-39"></div>

CSS

.shape-39
{
  width: 0;
  height: 0;
  border-top: 50px solid #333;
  border-left: 50px solid transparent;
}

view code

HTML

<div class="shape-40"></div>

CSS

.shape-40
{
  width: 0;
  height: 0;
  border-bottom: 50px solid #333;
  border-right: 50px solid transparent;
}

view code

HTML

<div class="shape-41"></div>

CSS

.shape-41
{
  width: 0;
  height: 0;
  border-bottom: 50px solid #333;
  border-left: 50px solid transparent;
}

by CSS-Tricks view code

HTML

<div class="shape-42"></div>

CSS

.shape-42
{
  border-bottom: 40px solid #333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  height: 0;
  width: 40px;
}

by CSS-Tricks view code

HTML

<div class="shape-43"></div>

CSS

.shape-43
{
  width: 50px;
  height: 50px;
  transform: skew(20deg);
  background: #333;
}

by CSS-Tricks view code

HTML

<div class="shape-44"></div>

CSS

.shape-44
{
            /* Modify size here: */
  --size: 25px;
  width: 0;
  height: 0;
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: calc(var(--size) * 2) solid #333;
  position: relative;
}

.shape-44:after
{
  width: 0;
  height: 0;
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: calc(var(--size) * 2) solid #333;
  position: absolute;
  content: "";
            top: calc(var(--size) / 2);
  left: calc(var(--size) * -1);
}

by Aaron Hanson view code

HTML

<div class="shape-45"></div>

CSS

.shape-45
{
            /* Modify size here: */
  --size: 50px;
  width: var(--size);
  height: calc(var(--size) * 0.57735);
  background: #333;
  position: relative;
}

.shape-45::before
{
  content: "";
            position: absolute;
  top: calc(var(--size) * -0.288675);
  left: 0;
  width: 0;
  height: 0;
  border-left: calc(var(--size) / 2) solid transparent;
  border-right: calc(var(--size) / 2) solid transparent;
  border-bottom: calc(var(--size) * 0.288675) solid #333;
}

.shape-45::after
{
  content: "";
            position: absolute;
  bottom: calc(var(--size) * -0.288675);
  left: 0;
  width: 0;
  height: 0;
  border-left: calc(var(--size) / 2) solid transparent;
  border-right: calc(var(--size) / 2) solid transparent;
  border-top: calc(var(--size) * 0.288675) solid #333;
}

by CSS-Tricks view code

HTML

<div class="shape-46"></div>

CSS

.shape-46
{
  --size: 30px;
  position: relative;
  width: var(--size);
  box-sizing: content-box;
  border-width: calc(var(--size) * 0.925) calc(var(--size) * 0.333) 0;
  border-style: solid;
  border-color: #333 transparent;
}

.shape-46:before
{
  content: "";
            position: absolute;
  height: 0;
  width: 0;
  top: calc(var(--size) * -1.574);
  left: calc(var(--size) * -0.333);
  border-width: 0 calc(var(--size) * 0.833) calc(var(--size) * 0.648);
  border-style: solid;
  border-color: transparent transparent #333;
}

by Nicolas Gallagher view code

HTML

<div class="shape-47"></div>

CSS

.shape-47
{
            /* Modify size here: */
  --size: 50px;
  --thickness: calc(var(--size) * 0.1);
  position: relative;
  width: var(--size);
  height: calc(var(--size) * 0.47);
  box-sizing: content-box;
}

.shape-47:before,
          .shape-47:after
{
  content: "";
            box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--size) * 0.28);
  height: calc(var(--size) * 0.28);
  border: var(--thickness) solid #333;
  border-radius: 50px 50px 0 50px;
  transform: rotate(-45deg);
}

.shape-47:after
{
  left: calc(44% + var(--thickness));
  right: 0;
  border-radius: 50px 50px 50px 0;
  transform: rotate(45deg);
}

by CSS-Tricks view code

HTML

<div class="shape-48"></div>

CSS

.shape-48
{
            /* Modify size here: */
  --size: 50px;
  display: block;
  width: var(--size);
  height: calc(var(--size) * 1.44);
  background-color: #333;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

by Catalin Rosu view code

HTML

<div class="shape-49"></div>

CSS

.shape-49
{
            /* Modify size here: */
  --size: 50px;
  position: relative;
  background: #333;
  height: var(--size);
  width: var(--size);
  border-radius: 50px;
}

.shape-49:before,
          .shape-49:after
{
  content: '';
            position: absolute;
  border-bottom: calc(var(--size) * 0.7) solid #333;
  border-left: calc(var(--size) * 0.4) solid transparent;
  border-right: calc(var(--size) * 0.4) solid transparent;
  top: calc(var(--size) * 0.7);
  left: calc(var(--size) * -0.1);
  transform: rotate(-140deg);
}

.shape-49:after
{
  left: auto;
  right: calc(var(--size) * -0.1);
  transform: rotate(140deg);
}

by CSS-Tricks view code

HTML

<div class="shape-50"></div>

CSS

.shape-50
{
  position: relative;
  width: 50px;
  height: 40px;
  background: #333;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
}

.shape-50:before
{
  content: '';
            position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

by Julian Lengfelder view code

HTML

<div class="shape-51"></div>

CSS

.shape-51
{
  width: 50px;
  height: 70px;
            /* border-radius: horziontal values / vertical values */
  border-radius: 50px 50px / 20px 20px;
  background: #333;
}

by Eric Fraze view code

HTML

<div class="shape-52"></div>

CSS

.shape-52
{
  display: inline-block;
  width: auto;
  height: 38px;
  background-color: #333;
  -webkit-border-radius: 3px 4px 4px 3px;
  -moz-border-radius: 3px 4px 4px 3px;
  border-radius: 3px 4px 4px 3px;
  border-left: 1px solid #333;
            /* This makes room for the triangle */
  margin-left: 19px;
  position: relative;
  color: white;
  line-height: 38px;
  padding: 0 10px 0 10px;
}

          /* Makes the triangle */
.shape-52:before
{
  content: "";
            position: absolute;
  display: block;
  left: -19px;
  width: 0;
  height: 0;
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  border-right: 19px solid #333;
}

          /* Makes the circle */
.shape-52:after
{
  content: "";
            background-color: white;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  display: block;
  position: absolute;
  left: -9px;
  top: 17px;
}

by Julian Lengfelder view code

HTML

<div class="shape-53"></div>

CSS

.shape-53
{
            /* Modify size here: */
  --size: 50px;
  --padding: 10px;
  position: relative;
  width: calc(var(--size) - var(--padding));
  height: calc(var(--size) / 2);
  background: #333;
  padding: var(--padding);
}

.shape-53:after
{
  content: '';
            position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #333;
  height: 16px;
  width: 16px;
}

view code

HTML

<div class="shape-54"></div>

CSS

.shape-54
{
            /* Modify size here: */
  --size: 50px;
  --padding: 10px;
  position: relative;
  width: calc(var(--size) - var(--padding));
  height: calc(var(--size) / 2);
  background: #333;
  padding: var(--padding);
}

.shape-54:after
{
  content: '';
            position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #333;
  height: 16px;
  width: 16px;
}

view code

HTML

<div class="shape-55"></div>

CSS

.shape-55
{
            /* Modify size here: */
  --size: 50px;
  --padding: 10px;
  position: relative;
  width: calc(var(--size) - var(--padding));
  height: calc(var(--size) / 2);
  background: #333;
  padding: var(--padding);
}

.shape-55:after
{
  content: '';
            position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #333;
  height: 16px;
  width: 16px;
}

view code

HTML

<div class="shape-56"></div>

CSS

.shape-56
{
            /* Modify size here: */
  --size: 50px;
  --padding: 10px;
  position: relative;
  width: calc(var(--size) - var(--padding));
  height: calc(var(--size) / 2);
  background: #333;
  padding: var(--padding);
}

.shape-56:after
{
  content: '';
            position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #333;
  height: 16px;
  width: 16px;
}

by Jared Cornwall view code

HTML

<div class="shape-57"></div>

CSS

.shape-57
{
  border: 1px solid #333;
  padding: 1.5em;
  position: relative;
  width: 50px;
}

.shape-57:before,
          .shape-57:after
{
  content: "";
            display: block;
  height: 0;
  left: 50%;
  position: absolute;
  width: 0;
}

.shape-57:before
{
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 6px solid red;
  margin-left: -5px;
  top: -6px;
  z-index: 4;
}

.shape-57:after
{
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 5px solid #fff;
  margin-left: -3px;
  top: -5px;
  z-index: 5;
}

FAQ

Our goal is to make high-quality design accessible to everyone at an affordable price. We collaborate with a global network of talented designers and developers who provide us with unique and innovative designs at a reduced cost. By streamlining our processes and focusing on efficiency, we keep our prices low, making professional-quality designs accessible to all businesses and individuals.

The download file includes everything you need to get started: HTML, CSS, JS files, and all relevant images. The files are identical to what you see on the live demo, provided in clean and well-structured HTML format for easy customization without requiring additional installations.

Yes, you can use the themes for multiple projects as long as they comply with our terms.

Yes, we provide dedicated customer support to help you resolve any issues or questions related to our themes. You can reach out to us through our support email ([email protected]), and we’ll respond promptly.

57 Beautiful CSS Shapes

FAQ

How are we able to offer high-quality themes at such an affordable price?

What does the download file include?

Can I use the themes for multiple projects?

Do you provide support if I encounter any issues?