CODEWITHSUNDEEP
csscss-shapes
dmxt
dmxt

Reputation: 119

Bordered button with slated corner with CSS

I'm trying to achieve the bordered button with slated (with turned page effect) corner with CSS, example:

enter image description here

http://jsfiddle.net/dmxt/75Fkv/

HTML:

<a class="btn-note" href="#" role="button">gratis prøve</a>

CSS:

.btn-note {
    font-family: sans-serif;
    font-size: 36px;
    position: relative;
    border: solid 5px #00ABE2;
    color: #00ABE2;
    padding: 10px 80px 10px 10px;
    text-decoration: none;
    text-transform: uppercase;

}

.btn-note:before {
   content: "";
   position: absolute;
   bottom: -2px;
   right: -2px;
   border-width: 30px 30px 0 0;
   border-style: solid;
   border-color: #00ABE2 rgba(0,0,0,0);

}

.btn-note:hover {
    text-decoration: none;
    color: #fff;
    border-color: #fff;
}

Thanks, I hope I could get it answered. I've been trying for a long time. Thanks!

Upvotes: 2

Views: 1121

Answers (4)

landrykapela
landrykapela

Reputation: 472

I did this and it works very fine. The green background can be replaced with an image background and it should work fine. 

.green_background{
     background:#009966;width:200;
 height:100;
 padding:30px 10px 10px 10px;
 font-family:sans-serif,verdana,helvetica;
 font-size:20px;
 text-align:center;
}
.example_holder{
  background:#000000;
  float:left;
  padding-top:20px;
  border-bottom: 4px solid #00ccff;
  border-right: 0px solid #00ccff;
  border-left: 4px solid #00ccff;
  border-top:4px solid #00ccff;
  margin-right:0;
  color:#ffffff;
  height:40%;
  width:77.8%;  
}
.top_right_corner{
   float:right;
   background:#000000;
   border-right: 4px solid #00ccff;
   border-left:0px solid #000000;
   border-top:4px solid #00ccff;
   margin-left:0px;
   bottom:0px;
   width:18.8%;
   height:22%;
 }
 .bottom_right_corner{
  float:right;
  background:transparent;
  border-bottom: 21px solid transparent;
  border-right: 21px solid transparent;
  border-left: 20px solid #00ccff;
  border-top:20px solid #00ccff;
  bottom:0px;
  width:0;
  height:0;
  }

You need to be careful with the size of borders and widths of each element. Check a working example

<div class="green_background">
<div class="example_holder">Example</div>
<div class="top_right_corner"></div>
<div class="bottom_right_corner"></div>
</div>

Upvotes: 0

Cyclopeus
Cyclopeus

Reputation: 19

Try this:

.btn-note:before {
   content: "";
   position: absolute;
   bottom: -5px;
   right: -5px;
   border-width: 30px 30px 0 0;
   border-style: solid;
   border-color: #00ABE2 black;
}

In your "rgba(0,0,0,0)" you set the black border to transparent, and the blue from the main rectangle showed through.

EDIT:

Ok How about this Scalable Vector Graphics (SVG) method?

<svg height="200" width="400">
      <polygon points="0,0 400,0 400,150 350,200 0,200"
               style="fill:none; stroke:#00ABE2;stroke-width:15"  />
      <polygon points="350,150 400,150 350,200" 
               style="fill:#00ABE2;stroke:#00ABE2;stroke-width:10" />  
      <text x="50" y="100" fill="#00ABE2" font-size="3em">Gratis</text>
</svg>

JS Fiddle: link

W3 Schools Tutorial: link

This SVG stuff may not be supported in older browsers.

Upvotes: 0

King King
King King

Reputation: 63387

There are at least 3 ways to achieve this (using just pseudo-elements, if using addtional HTML elements, we even have more ways to go), each has its own advantage. I would like to introduce 2 ways. The first uses 2 pseudo-elements. The second uses multi-background feature together with one pseudo-element and the calc function (looks like browsers supporting multi-backgrounds feature should also support calc function, and only IE8 is considered to be a fairly old browser which does not support these features).

1. The first solution:

.btn-note {
  font-family: sans-serif;
  font-size: 36px;
  position: relative;
  border: solid 5px #00ABE2;
  border-right:0;    
  color: #00ABE2;
  padding: 10px 50px 10px 10px;
  text-decoration: none;
  text-transform: uppercase;    
}
 /* render the triangle corner */
.btn-note:before {
  content: "";
  position: absolute;
  left:100%;
  bottom:-5px;
  border-width: 15px;
  border-style: solid;
  border-color: inherit;
  border-right-color:transparent;
  border-bottom-color:transparent;
}
 /* render the right border */
.btn-note:after {
  content:'';
  position:absolute;
  box-sizing:border-box;
  width:30px;
  left:100%;
  top:-5px;
  bottom:25px;
  border-width:5px 5px 0 0;
  border-color:inherit;    
  border-style:solid;
}
.btn-note:hover {
  text-decoration: none;
  color: #fff;
  border-color: #fff;   
}
body {
  background:url(http://lorempixel.com/800/600);
}

Demo 1.

2. The second solution:

.btn-note {
  font-family: sans-serif;
  font-size: 36px;
  position: relative;
  border: solid 5px #00ABE2;
  border-right:0;
  border-bottom:0;
  color: #00ABE2;
  padding: 10px 80px 10px 10px;
  text-decoration: none;
  text-transform: uppercase;
  background:linear-gradient(to top, #00abe2,#00abe2),
             linear-gradient(to left, #00abe2, #00abe2);
  background-repeat:no-repeat;
  background-size:calc(100% - 30px) 5px, 5px calc(100% - 30px);
  background-position: left 0 bottom 0, right 0 top 0;
}

.btn-note:before {
  content: "";
  position: absolute;
  right:0;
  bottom:0;
  border-width: 15px;
  border-style: solid;
  border-color: inherit;
  border-right-color:transparent;
  border-bottom-color:transparent;
}

.btn-note:hover {
  text-decoration: none;
  color: #fff;
  border-color: #fff;
  background-image:linear-gradient(to top, #fff,#fff),
                   linear-gradient(to left, #fff, #fff);
}
body {
  background:url(http://lorempixel.com/800/600);
}

Demo 2.

The difference between the 2 solutions is, while the text can be spreaded the whole inner width of the bounding box (with 5px border) using the second solution, the first solution limits the text just inside the actual width of the .btn-note which is about 30px distant from the right edge of the bounding box. That means the second solution is a little better.

Upvotes: 4

amol
amol

Reputation: 1555

Try this code

<div class="note">
    <div class="innerNote">
        Your Content
    </div>
</div>

.note {
  position: relative;
  width: 30%;
  padding: 5px;
  margin: 2em auto;
  color: #fff;
  background: blue;
  overflow: hidden;
}

.note:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  border-width: 25px 25px 0 0; /* you can manage the size of corner here*/
  border-style: solid;
  border-color: blue #fff;
}
.innerNote{
    padding: 10px;
    color: #fff;
    background: #000;
}

Check this Demo

Upvotes: 0

Related Questions