How to Bevel the Corner of a Block Div

How to bevel the corner of a block div?

Until CSS4 border-corner-shape property is in danger! and it's not implemented, This can be done by using CSS3 transforms (to keep border property free for further usage):

HTML:

<div class="box">
  Text Content
</div>

CSS:

.box {
  width: 200px; 
  height: 35px;
  line-height: 35px;
  padding: 0 5px;
  background-color: #ccc;
  padding-right: 20px;
  border: solid 1px black;
  border-right: 0;  
  position: relative;
}

.box:after {
  content: "";
  display: block;
  background-color: #ccc;
  border: solid 1px black;
  border-left: 0;
  width: 35px;
  height: 35px;
  position: absolute;
  z-index: -1;
  top: -1px; /* pull it up because of 1px border */
  right: -17.5px; /* 35px / 2 */
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}

Here is JSBin Demo.

NOTE: There's another div in example above has class attribute of box2, which implemented without using CSS3 declarations that you might consider using it ;)

Creating beveled corners

I ended up using a background image on a div that overlaid the menu, and changed the class of both the last tab and the div with JavaScript when the last tab was selected.

I would have liked to do this purely through CSS, and the use of :before and :after pseudo elements that were offset came very close, but it was too difficult to get a pixel-perfect layout working across all browsers.

Here's my code for the curious.

Javascript:

if($('.tabs .tab-right').hasClass('selected')){
    $(".tab .angle").addClass('angle-selected');
}else{
    $(".tab .angle").removeClass('angle-selected');
}

CSS:

.tabs .tab-right {
    padding: 8px 28px 8px 12px;
}
.tabs .angle {
    background: url("../img/angle-noborder.png") no-repeat transparent;
    height: 35px;
    width: 28px;
    display: inline-block;
    position: relative;
    right: 28px;
}
.tabs .angle.angle-selected {
    background: url("../img/angle-border.png") no-repeat transparent;
}

Bevel corners, background not rounded

Since you are using multiple background you can add more using radial-gradiant to create the corner (I removed the vendor prefixes to simplify the code)

.test-block {  height: 480px;  padding: 4px;  color: #ffffff;  background-color: transparent;  background-image:   radial-gradient(circle at top left, transparent 40%, #1698d9 0%),   radial-gradient(circle at bottom left, transparent 40%, #1698d9 0%),   radial-gradient(circle at top right, transparent 40%, #1698d9 0%),   linear-gradient(180deg, #1698d9, #1698d9),   linear-gradient(225deg, #1698d9, #1698d9),   linear-gradient(0deg, #1698d9, #1698d9),   linear-gradient(90deg, #1698d9, #1698d9),   linear-gradient(135deg, transparent 28px, #1698d9 28px, #1698d9 32px, transparent 10px);  background-position:   bottom right,   top right,   bottom left,   top right,   top right,   bottom left,   bottom left,   top left;  background-size:   10px 10px, 10px 10px, 10px 10px,   calc(100% - 40px) 4px,   4px 100%,   100% 4px,   4px calc(100% - 40px),   100% 100%;  background-repeat: no-repeat;  border-radius: 10px;  width: 320px;}body { background-image:linear-gradient(30deg, pink, yellow);}

<div class="test-block"> </div>

Removing the Bevel Effect on the Corner of Borders

That's the way borders work, I believe there's no way to change this without an extra element.

Instead of empty divs, you can use wrapper divs.

<div class="outer">
    <div class="inner">test</div>
</div>

.inner {
    padding : 5px;
    border : 15px solid red;
    border-top: 0;
}
.outer {
    border-top : 15px solid teal;
}

Demo: http://jsfiddle.net/fmcvY/

There's another way to do it with :before/:after psuedo elements but it's a little messier, however it requires no extra markup:

<div>test</div>

div {
    padding : 5px;
    border : 15px solid red;
    border-top: 0;
    position:relative;
    padding-top: 20px; /* border width plus desired padding */
}
div:before {
    content:' ';
    display:block;
    background: teal;
    height:15px;
    padding:0 15px; /* border width plus div padding */
    width:100%;
    position:absolute;
    top: 0;
    left:-15px; /* border width plus div padding */
}

You can write the CSS in a number of different ways to achieve the same effect. Demo: http://jsfiddle.net/fmcvY/3/

Cut Corners using CSS

If the parent element has a solid color background, you can use pseudo-elements to create the effect:

div {    height: 300px;    background: red;    position: relative;}
div:before {    content: '';    position: absolute;    top: 0; right: 0;    border-top: 80px solid white;    border-left: 80px solid red;    width: 0;}

<div></div>

Angled corners on CSS with Transparency

You can consider multiple background to achieve this and you are almost good with your linear-gradient(-220deg, transparent 10px, #ad1c1c 10px). Simply adjust the size and position:

h1 {  color: #fff;  text-align: center;  padding:10px;  background:    linear-gradient(-225deg,transparent 10px,#ad1c1c 0) left /50.5% 100%,    linear-gradient( 225deg,transparent 10px,#ad1c1c 0) right/50.5% 100%;  background-repeat:no-repeat;}
body { background:pink;}

<h1 >Test</h1>

Create border arround special beveled css shape?

You can achieve using clip-path and multiple background:

.box {
  --d:30px; /* control the clip-path */
  --b:4px;  /* the border length */
  --c:orange; /* the color */
  
  --gc:var(--c) calc(50% + var(--b)*0.707),#0000 0;
  --gl:var(--c), #0000 40% 60%,var(--c);
  
  
  height:200px;
  margin:50px;
  clip-path:polygon(var(--d) 0,calc(100% - var(--d)) 0,100% var(--d),100% calc(100% - var(--d)),calc(100% - var(--d)) 100%, var(--d) 100%, 0 calc(100% - var(--d)),0 var(--d));
  
  background:
    /* the corners */
    linear-gradient( 135deg, var(--gc)) 0    0   /var(--d) var(--d),
    linear-gradient(  45deg, var(--gc)) 0    100%/var(--d) var(--d),
    linear-gradient( -45deg, var(--gc)) 100% 100%/var(--d) var(--d),
    linear-gradient(-135deg, var(--gc)) 100% 0   /var(--d) var(--d),
    
    /* the lines */
    linear-gradient(90deg, var(--gl)) top   /100% var(--b),
    linear-gradient(90deg, var(--gl)) bottom/100% var(--b),
    linear-gradient( 0deg, var(--gl)) left  /var(--b) 100%,
    linear-gradient( 0deg, var(--gl)) right /var(--b) 100%;
  background-repeat:no-repeat;
  position:relative;
}

<div class="box">

</div>

How to add an offsetted outline to a CSS shape?

Here is an idea based on this previous answer. Simply adjust the different variables to get the result you want:

.box {
  --c:10px; /* the corner */
  --b:3px;  /* border thickness*/
  --o:-10px,-15px; /* offset*/
  --border-color:green;
  --bg-color:red;

  width: 200px;
  height: 100px;
  display:inline-block;
  margin:30px;
  position:relative;
  z-index:0;
}

.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  clip-path: polygon(var(--c) 0%, calc(100% - var(--c)) 0%, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0% calc(100% - var(--c)), 0% var(--c));
  background:var(--bg-color);
}

.box:after {
  --grad:transparent 49.5%,var(--border-color) 50%;
  background: 
    linear-gradient(to top right   ,var(--grad)) top    right,
    linear-gradient(to top left    ,var(--grad)) top    left,
    linear-gradient(to bottom right,var(--grad)) bottom right,
    linear-gradient(to bottom left ,var(--grad)) bottom left;
  background-size:calc(var(--c) - var(--b)) calc(var(--c) - var(--b));
  background-repeat:no-repeat;
  border: var(--b) solid var(--border-color);
  transform:translate(var(--o));
}

<div class='box'></div>

<div class='box' style="--c:40px;--b:2px;--o:10px,-20px;--border-color:blue;--bg-color:orange"></div>

How to Bevel the Corner of a Block Div