How can you create beveled corners for block divs in CSS without using border-corner-shape?

Achieving Beveled Corners for Block Divs in CSS

The task of stylizing a block div with beveled corners can be approached in various ways. CSS4 border-corner-shape remains an option, however, its implementation is still pending. Therefore, we'll delve into a solution using CSS3 transforms.

Implementation Using CSS3 Transforms

Within the HTML document, create a div element with the desired class name for the block.

HTML:

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

Define the styling in CSS as follows:

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);
}

This solution maintains the original border property intact, leaving it available for further adjustments. For a practical demonstration, refer to the provided JSBin Demo.

Alternative Solution Using the Second Div

For simplicity, consider another CSS implementation that achieves similar results using a second div without CSS3. See the box2 class within the CSS provided earlier.

The above is the detailed content of How can you create beveled corners for block divs in CSS without using border-corner-shape?. For more information, please follow other related articles on the PHP Chinese website!