CSS3 変換を使用してブロック Div のベベルコーナーを実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS3 変換を使用してブロック Div のベベルコーナーを実現するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-10-29 13:12:03

オリジナル

823 人が閲覧しました

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

ブロック Div の角を面取りする

課題

「block1」クラスのブロック div を含む HTML ドキュメントでは、目標は、提供された画像に示すように、div の右側に面取りされたコーナーを作成することです。

解決策

今後の CSS4 border-corner-shape を利用せずにこの効果を実現するには

実装

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>