Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erstelle ich mithilfe von CSS3-Transformationen abgeschrägte Ecken auf einem Blockteil?

Patricia Arquette
Freigeben: 2024-10-28 04:12:30
Original
635 Leute haben es durchsucht

How to Create Beveled Corners on a Block Div Using CSS3 Transforms?

Abgeschrägte Ecken auf einem Block-Div gestalten

Im bereitgestellten HTML-Dokument ist ein Standard-Block-Div mit einem durchgezogenen Rand definiert. Das Ziel besteht darin, einen abgeschrägten Eckeneffekt auf der rechten Seite des Div zu erzeugen.

Um diesen Effekt mit CSS3 zu erzielen, wäre die Eigenschaft „border-corner-shape“ die ideale Lösung. Allerdings wird es noch nicht von allen Browsern vollständig unterstützt. Ein alternativer Ansatz, der CSS3-Transformationen nutzt, bietet eine Problemumgehung:

HTML:

<code class="html"><div class="box">
  Text Content
</div></code>
Nach dem Login kopieren

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>
Nach dem Login kopieren

Dieser Ansatz beinhaltet das Hinzufügen eines zusätzlichen div als Nachelement von .box. Dieses Div wird absolut über dem .box-Element positioniert, mit einer schrägen Transformation, um den abgeschrägten Effekt zu erzeugen.

Weitere Illustrationen finden Sie in der JSBin-Demo in der Antwort. Beachten Sie, dass das Beispiel auch eine weitere div-Klasse (Box2) enthält, die eine alternative Implementierung ohne CSS3-Deklarationen demonstriert.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe von CSS3-Transformationen abgeschrägte Ecken auf einem Blockteil?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!