How to Create Beveled Corners on a Block Div Using CSS3 Transforms?

Styling Beveled Corners on a Block Div

In the provided HTML document, a standard block div with a solid border is defined. The goal is to create a beveled corner effect on the right side of the div.

To achieve this effect using CSS3, the border-corner-shape property would be the ideal solution. However, it is not yet fully supported by all browsers. An alternative approach that leverages CSS3 transforms offers a workaround:

HTML:

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

CSS:

<code class="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;
  right: -17.5px;
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}</code>

This approach involves adding an additional div as the after element of .box. This div is positioned absolutely over the .box element, with a skewed transformation to create the beveled effect.

For further illustration, see the JSBin Demo provided in the answer. Note that the example also includes another div class (box2) that demonstrates an alternative implementation without CSS3 declarations.

The above is the detailed content of How to Create Beveled Corners on a Block Div Using CSS3 Transforms?. For more information, please follow other related articles on the PHP Chinese website!