CODEWITHSUNDEEP
htmlcssbordercss-shapes
AKAI
AKAI

Reputation: 15

Draw outline around custom polygon shape?

CSS - how to make border for custom shape in css so that the border is ONLY on the outer edges of my shape (not as it is now in the inside)?

I am using div with :before and :after pseudoclass...

https://codepen.io/RobotHabanera/pen/oGqwez

This is CSS :

  .nosce {
        box-sizing:border-box;
        position:relative;
        left:100px;
        top:100px;
        margin:0 auto;
        width:850px;
        height:570px;
        background:orangered; 
        border: dashed 2px #000;



    }

    .nosce:before {
        content:'';
        position:absolute;
        z-index:2;
        left:-57px;
        top:536px;
        width:545px;
        height:260px;
        background:orangered; 
        border: dashed 2px #000;          
    }

    .nosce:after {
        content:'';
        position:absolute;
        z-index:1;
        left:203px;
        bottom:-285px;
        width:285px;
        height:30px;
        background:orangered;
        border: dashed 2px #000;
    }

Upvotes: 1

Views: 977

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39362

SVG is the recommended way to create such shapes. It offers simplicity and scale-ability.

We can use SVG's polygon or path element to create a shape like above and stroke / fill it with some solid color, gradient or a pattern.

Only one attribute points is used to define shapes in polygon element. This attribute consists of a list of points. Each point must have 2 numbers, an x coordinate and a y coordinate. A straight line is drawn automatically from the last point to the starting point to close the shape.

Below is the necessary code to create this shape:

<polygon points="55,5 55,450 5,450 5,820 260,820 260,850
                 550,850 550,570 855,570 855,5 55,5"
         fill="orangered" stroke="black" stroke-width="2" stroke-dasharray="8,4" />

Below is a brief description of the above code:

  • points attribute defines the structure of the shape.
  • stroke attribute defines the color for the outline / border.
  • stroke-width defines the thickness of the outline / border.
  • stroke-dasharray attribute controls the pattern of dashes and gaps used to stroke paths.
  • fill attribute defines the color for the interior shape to be filled.

Output Image:

polygon shape

Working Example:

svg {
  height: auto;
  width: 70%;
}
<svg width="900" height="855" viewBox="0 0 900 855">
  <polygon points="55,5 55,450 5,450 5,820 260,820 260,850 550,850 550,570 855,570 855,5 55,5" fill="orangered" stroke="black" stroke-width="2" stroke-dasharray="8,4" />
</svg>

Useful Resources:

Below are some useful links for SVG:

Upvotes: 1

Related Questions