Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS make hexagon shape with border and rounded corners in css

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #240889
    yasin
    Participant

    I want to make a hexagonal shape with border and rounded corners in CSS3 like in this image : https://www.dropbox.com/s/zjb8jbkij6j5ee1/image.png?dl=0

    I can’t make this with border.

    My code is here :

    #hexagon-circle {
    position: relative;
    margin: 1em auto;
    width: 10em;
    height: 17.32em;
    border-radius: 1em/.5em;
    background: red;
    transition: opacity .5s;
    cursor: pointer;
    }

    #hexagon-circle:before {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: ”;
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);}

    #hexagon-circle:after {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: ”;
    -webkit-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);} }

    #240891
    Paulie_D
    Member
    #240895
    yasin
    Participant

    thanks…It is my own question in stackoverflow :) but I found solution…:)

    #240896
    Paulie_D
    Member

    Yes, I know…that was my point.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.