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

How to Create a Beveled Corner on a Div Element Using CSS3 Transforms

Problem:

Consider an HTML document with a div element with a straight border. How can we modify its style to achieve a beveled corner, as shown in the image below?

[Image of a div element with a beveled corner]

Answer:

While the CSS4 property border-corner-shape is still in its early stages of development, a workaround using CSS3 transforms can be implemented:

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 technique involves creating a triangular-shaped div element with a transformed skew and absolute positioning to achieve the beveled effect. Note that an additional div element with the class "box2" is also included in the HTML and CSS, which illustrates an alternative approach without using CSS3 declarations.

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