How to get a border around this polygon?


Tags: html,css,css3

Problem :

I have created a shape with 5 corners using polygon as shown below.

enter image description here

This is the css needed to make it:

div {
    width: 280px;
    height: 280px;
    background: #1e90ff;
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%);
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%);
    border: 3px solid black;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
}

Unfortunately I cannot get it to add a black border all around the shape (it is missing on the right side). How would I do that?

I have created a fiddle here.



Solution :

The border property goes around the outside of an element, and the clip-path property applies a mask to an element. So, as far as other CSS rules are concerned, you're still dealing with a rectangle. Because of this, you can't simply apply a border.

It's not impossible to get very close to the effect you want, however. Using (and abusing) CSS pseudo-elements, borders, and filters you can create the same shape plus an outline with only a single HTML div.

div {
  position: relative;
  width: 210px;
  height: 280px;
  background: #1e90ff;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  filter:
    drop-shadow( 0px  3px 0 black)
    drop-shadow( 0px -3px 0 black)
    drop-shadow( 3px  0px 0 black)
    drop-shadow(-3px  0px 0 black);
  -webkit-filter:
    drop-shadow( 0px  3px 0 black)
    drop-shadow( 0px -3px 0 black)
    drop-shadow( 3px  0px 0 black)
    drop-shadow(-3px  0px 0 black);
}
div::after {
  position: absolute;
  display: block;
  content: '';
  width: 0;
  height: 0;
  left: 210px;
  top: 0;
  border-left: 70px solid #1e90ff;
  border-right: 70px solid transparent;
  border-top: 140px solid transparent;
  border-bottom: 140px solid transparent;
}
<div>
</div>

So, what's going on here?

The main div element is just the rectangular portion of the shape (with rounded top-left and bottom-left corners). It also has an ::after pseudo-element which creates the triangle shape. The triangle shape is done using the CSS border-triangle hack.

Okay, so that creates the shape without having to mask off any of the element, but a border still can't be applied directly, since I've already (ab)used the border to create the triangle. Using a CSS outline or box-shadow would be the next logical choice, but both properties go all the way around the element's bounding-box... ignoring features like rounded corners or hacky transparent borders.

Enter the CSS filter property. This provides a family of post-processing filters. The important thing to note is that they treat the element as a transparency mask when being applied, rather than respecting the element's bounding-box... and there is a drop-shadow filter!

Unfortunately, it's not quite as flexible as the box-shadow property in that it doesn't have a "spread" parameter which can be used to create solid shapes that are larger than the element. To get around this, we need to cast a drop-shadow in every direction: up, down, right, and left. That's where this monstrosity comes in:

filter:
  drop-shadow( 0px  3px 0 black)
  drop-shadow( 0px -3px 0 black)
  drop-shadow( 3px  0px 0 black)
  drop-shadow(-3px  0px 0 black);

Ta-da!

Expanding on this: this works on any shape you can manage to create (as long as it done without clipping). Just apply a drop-shadow filter to the element, or to a parent/wrapper div (if it's a multi-element shape) to get a border.


    CSS Howto..

    How to avoid CSS interference in an HTML page

    How to implement dynamic layout columns by using the `content_for?` method?

    how can i add class to errorsummay without remove header message

    How to force the border color of a cell in a html table

    How to deal with different stylesheets (WYSIWYG Editor and Webpage one) in the same page?

    How to make layout with 3 elements where 1 is resizable

    How do I conditionally apply CSS styles in AngularJS?

    How Can I Make An Odd Shaped Icon into a “Circle”?

    How can I find out what CSS is needed to implement twitter Bootstraps Modal. [closed]

    how to set border spacing in javafx

    How to move a table(or other content) next to vertical navigation bar

    How to replace non-existing images with a default one in css?

    How to build those rectangular with picture and text css bootsrap? [closed]

    How to keep css elements from moving during transition

    How to add Jquery Mobile effects to dynamically added elements?

    How to change background color of elements every 5s using jquery? [duplicate]

    How to get smaller divs to stack to the right of larger divs?

    How to add a centered div that fades-in from the top over my content?

    How to line up items of varied length in a resizable space in CSS?

    How to give the background-image path in CSS?

    How to modify HTML inside PHP by CSS [closed]

    How to get an HTML div to dynamically expand in a horizontal direction to fit window width?

    How to center li tags list

    How to create rolldown content with css?

    CSS: How would I select a specific Text and hide it

    How Do I Make a “Trickless”, Cross-Platform CSS-Based Same Column Height?

    How to set style for n-th td in a table using css

    How to color row on specific value in angular-ui-grid?

    How to call JavaScript on change of CSS

    How do I set the background-image property to a linear gradient using jQuery's css method?