How do you achieve beveled corners on a block div using CSS3 transforms?

Beveling the Corners of a Block Div with CSS3

Achieving beveled corners on a block div was once a challenge before CSS4's border-corner-shape property. However, with CSS3 transforms, we can create this effect while preserving the border property for future uses.

Let's examine an HTML structure and CSS styles to create beveled corners:

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; /* 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);
}</code>

In the CSS code, we use a pseudo-element to create the beveled corner. This pseudo-element is positioned absolutely and has a negative z-index to ensure it stays behind the main div. The skew() transform is applied to rotate the corner.

It's important to note that the border-right property is set to 0 to create the illusion of a beveled corner. The pseudo-element's border-left property is also set to 0 to ensure a visually clean corner.

This technique effectively adds beveled corners to block divs, allowing for more visually appealing designs.

The above is the detailed content of How do you achieve beveled corners on a block div using CSS3 transforms?. For more information, please follow other related articles on the PHP Chinese website!