CSS Shapes

how to create a triangle with CSS?

CSS  triangle we can use as a bullet point from CSS. Create with border property as border :10px solid #0bf

It creates a border for any element from all side.

We want to create a triangle with CSS OR arrow first point is that triangle should be from the which side left, right, top or bottom side.

What is the concept of the CSS arrow on triangle shape?

Suppose you want a triangle from the left side (Arrow symbol) then we will use

Border-top: 10px solid transparent;

Then top section will be off from the border. and next, write code.

            Border-right: 10px solid transparent

            Border-bottom: 10px solid transparent

            Border-left: 10px solid #0bf

You will find a triangle same as given in image.

CSS after and CSS before is important for the CSS Shape. This is the tricks of the CSS.

We can create many type shapes from the CSS as follows: CSS Triangle Shape, Triangle Shape Increased, Triangle Shape Rotated, CSS Circle Shape, CSS Oval Shape, CSS Square shape, CSS Trapezoid shape, CSS Rectangle shape, CSS Parallelogram shape, CSS Pentagon shape, CSS Hexagon shape, CSS Heart Shape, CSS Talking Bubble Shape, CSS Talking Bubble in Oval Shape etc.

You can see preview : looks like

CSS Code:

<style>

body {
            margin: 15px;
        }
        .conceptTriangleAny {
            width: 0;
            height: 0;
            border-left: 20px solid red;
            border-right: 20px solid green;
            border-top: 20px solid blue;
            border-bottom: 20px solid yellow;
            outline: 1px solid #000;
        }
        .anythingLeftTriangle {
            border-left: 20px solid #0bf;
            border-right: 20px solid transparent;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            width: 0;
        }
        .anythingRightTriangle {
            border-left: 20px solid transparent;
            border-right: 20px solid #0bf;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            width: 0;
        }
        .anythingTopTriangle {
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 20px solid #0bf;
            border-bottom: 0px solid transparent;
            width: 0;
        }
        .anythingBottomTriangle {
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 0px solid transparent;
            border-bottom: 20px solid #0bf;
            width: 0;
        }
        .anythingLeftTriangleSize {
            border-left: 40px solid #0bf;
            border-right: 0px solid transparent;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            width: 0;
        }
        .anythingLeftTriangleRotate {
            border-left: 20px solid #0bf;
            border-right: 20px solid transparent;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            width: 0;
            transform: rotate(90deg);
        }
        .anythingLeftTriangleRotate45 {
            border-left: 20px solid #0bf;
            border-right: 20px solid transparent;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            width: 0;
            transform: rotate(45deg);
        }
        .anythingCircle {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            background: #0bf;
        }
        .anythingOval {
            height: 50px;
            width: 100px;
            border-radius: 50%;
            background: #0bf;
        }
        h3 {
            font: normal 22px/30px arial;
            color: #000;
            margin-top: 30px;
            margin-bottom: 2px;
        }
        .anythingSquare {
            height: 100px;
            width: 100px;
            background: #0bf;
        }
        .anythingRectangle {
            height: 100px;
            width: 200px;
            background: #0bf;
        }
        .anythingTrapezoid {
            height: 0px;
            width: 200px;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid #0bf;
        }
        .anythingParallelogram {
            height: 100px;
            width: 200px;
            background: #0bf;
            transform: skew(15deg);
            margin-left: 30px;
        }
        .anythingPentagon {
            position: relative;
            height: 0px;
            width: 50px;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 50px solid #0bf;
            margin-top: 50px;
        }
        .anythingPentagon::before {
            content: "";
            position: absolute;
            top: -95px;
            left: -20px;
            border-left: 45px solid transparent;
            border-right: 45px solid transparent;
            border-top: 0px solid transparent;
            border-bottom: 45px solid #0bf;
        }
        .anythingHexagon {
            position: relative;
            height: 50px;
            width: 100px;
            background: #0bf;
            margin-top: 40px;
            margin-bottom: 60px;
        }
        .anythingHexagon::before {
            content: "";
            position: absolute;
            top: -30px;
            left: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 0px solid transparent;
            border-bottom: 30px solid #0bf;
        }
        .anythingHexagon::after {
            content: "";
            position: absolute;
            bottom: -30px;
            left: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 30px solid #0bf;
            border-bottom: 0px solid transparent;
        }
        .anythingHeart {
            position: relative;
            min-height: 90px;
        }
        .anythingHeart::before {
            content: "";
            position: absolute;
            top: 0;
            left: 30px;
            background: #0bf;
            height: 75px;
            width: 50px;
            border-radius: 50px 50px 0 0;
            transform: rotate(-45deg);
        }
        .anythingHeart::after {
            content: "";
            position: absolute;
            top: 0;
            left: 48px;
            background: #0bf;
            height: 75px;
            width: 50px;
            border-radius: 50px 50px 0 0;
            transform: rotate(45deg);
        }
        .anythingTalkingBubble {
            background: #0bf;
            border-radius: 10px;
            padding: 10px;
            position: relative;
            width: 250px;
            height: 100px;
        }
        .anythingTalkingBubble::after {
            content: "";
            position: absolute;
            bottom: -20px;
            right: 20px;
            border-left: 2px solid transparent;
            border-right: 10px solid transparent;
            border-top: 20px solid #0bf;
            border-bottom: 0px solid transparent;
        }
        .anythingTalkingBubbleOval {
            background: #0bf;
            border-radius: 50%;
            padding: 10px;
            position: relative;
            width: 250px;
            height: 100px;
        }
        .anythingTalkingBubbleOval::after {
            content: "";
            position: absolute;
            bottom: -20px;
            right: 80px;
            border-radius: 0 0px 60px 0px;
            border-right: 15px solid #0bf;
            height: 30px;
            width: 30px;
        }
.fiveStar {
      position: relative;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #0bf;
      border-left: 100px solid transparent;
      transform: rotate(35deg);
      margin: 80px 0;
    }
    .fiveStar:before {
      position: absolute;
      top: -46px;
      left: -66px;
      content: '';
      transform: rotate(-35deg);
      border-bottom: 80px solid #0bf;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
    }
    .fiveStar:after {
      position: absolute;
      top: 3px;
      left: -105px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #0bf;
      border-left: 100px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }
   
    .sixStar {
      width: 0;
      height: 0;
      border-left: 60px solid transparent;
      border-right: 60px solid transparent;
      border-bottom: 100px solid #0bf;
      position: relative;
    }
    .sixStar:after {
      width: 0;
      height: 0;
      border-left: 60px solid transparent;
      border-right: 60px solid transparent;
      border-top: 100px solid #0bf;
      position: absolute;
      content: "";
      top: 35px;
      left: -60px;
    }
 </style>

HTML Code:

<h3>CSS Triangle Shape Concept</h3>
    <div class="conceptTriangleAny"></div>
    <h3>CSS Left Triangle Shape</h3>
    <div class="anythingLeftTriangle"></div>
    <h3>CSS Right Triangle Shape</h3>
    <div class="anythingRightTriangle"></div>
    <h3>CSS Top Triangle Shape</h3>
   <div class="anythingTopTriangle"></div>
    <h3>CSS Bottom Triangle Shape</h3>
    <div class="anythingBottomTriangle"></div>
    <h3>CSS Left Triangle Shape Increased</h3>
    <div class="anythingLeftTriangleSize"></div>
    <h3>CSS Left Triangle Shape Rotated</h3>
    <div class="anythingLeftTriangleRotate45"></div>
    <h3>CSS Circle Shape</h3>
    <div class="anythingCircle"></div>
    <h3>CSS Oval Shape</h3>
    <div class="anythingOval"></div>
    <h3>CSS Square shape</h3>
    <div class="anythingSquare"></div>
    <h3>CSS Trapezoid shape</h3>
    <div class="anythingTrapezoid"></div>
    <h3>CSS Rectangle shape</h3>
    <div class="anythingRectangle"></div>
    <h3>CSS Parallelogram shape</h3>
    <div class="anythingParallelogram"></div>
    <h3>CSS Pentagon shape</h3>
    <div class="anythingPentagon"></div>
    <h3>CSS Hexagon shape</h3>
    <div class="anythingHexagon"></div>
    <h3>CSS Heart Shape</h3>
    <div class="anythingHeart"></div>
    <h3>CSS Talking Bubble Shape</h3>
    <div class="anythingTalkingBubble"></div>
    <h3>CSS Talking Bubble in Oval Shape</h3>
    <div class="anythingTalkingBubbleOval"></div>
<h3>CSS Five Star Shape</h3>
    <div class="fiveStar"></div>
    <h3>CSS Six Star Shape</h3>
    <div class="sixStar"></div>