How to Achieve a Beveled Corner on a Block Div Using CSS3 Transforms?

Beveling the Corner of a Block Div

The Challenge

In an HTML document containing a block div with a class of "block1", the goal is to create a beveled corner on the right side of the div, as illustrated in the provided image.

The Solution

To achieve this effect without utilizing the upcoming CSS4 border-corner-shape property, we employ CSS3 transforms in conjunction with position-based techniques.

Implementation

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>

Explanation

This implementation encompasses the following techniques:

• CSS3 Transforms: The skew transform property is applied to rotate the appended div by 45 degrees.
• Absolute Positioning: The appended div is absolutely positioned using top and right properties to create the beveled corner.
• Negative Z-Index: The appended div is given a negative z-index to bring it behind the original div.
• Border Manipulation: The original div's border-right is set to zero to prevent a second border on the beveled edge.
• Padding Modification: To compensate for the 1px border removed, the original div's padding-right is increased by 1px.

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