CODEWITHSUNDEEP
cssshapes
Archer
Archer

Reputation: 1124

Button shape with CSS

I'm trying to create an 'easy' button shape with css pseudeo :after/:before class.

enter image description here

I've read some blogs and articles about that, but no shape looked like mine. So I tried it on my own. But this I something, I can't figure out.

button{
    height: 50px;
    width: 250px;
    border: solid 2px #000;
    border-bottom: none;
    background: orange;    
  }
  button:after{
      height: 0;
      width: 125px;
      content:"";
      position: absolute;
      border-top: transparent 30px
      border-right: solid 2px #000;
    }
     button:before{
      height: 0;
      width: 125px;
      content:"";
      position: absolute;
      border-top: transparent 30px
      border-left: solid 2px #000;
    }
<button>Let's do it</button>

Can someone give me a hint?

Upvotes: 2

Views: 240

Answers (3)

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can create this with :before and :after pseudo elements one for border and other one above for orange background.

button {
  height: 50px;
  width: 250px;
  border: solid 2px #000;
  border-bottom: none;
  background: orange;
  position: relative;
}
button:after,
button:before {
  border-style: solid;
  border-width: 50px 110px 0 140px;
  border-color: #FFA500 transparent transparent transparent;
  content: '';
  position: absolute;
  left: -2px;
  top: 100%;
}
button:after {
  transform: translateY(-1px);
}
button:before {
  border-color: black transparent transparent transparent;
}
<button>Let's do it</button>

Upvotes: 2

Dekel
Dekel

Reputation: 62556

Not exactly the same size but you can play with the following one:

#pentagon {
    margin-top: 45px;
    position: relative;
    width: 250px;
    border-width: 70px 0 0;
    border-style: solid;
    border-color: orange transparent;
}
#pentagon:after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -30px;
    left: 0px;
    border-width: 50px 125px 0 125px;
    border-style: solid;
    border-color: orange white;
}
<div id="pentagon"></div>

Upvotes: 1

poashoas
poashoas

Reputation: 1894

You could play with this, it has a border like your image http://www.cssarrowplease.com/

Upvotes: 0

Related Questions