Bagaimana untuk Mencipta Sudut Serong dalam Kotak CSS?

Memohon Sudut Serong pada Kotak CSS

Untuk mencapai kesan visual yang menarik, kadangkala adalah wajar untuk memperkenalkan sudut senget ke dalam kotak CSS. Ini dengan serta-merta boleh mengubah segi empat tepat ringkas kepada elemen dinamik dan menarik perhatian.

Mencipta Kotak Sudut Potong

Untuk penyemak imbas yang menyokong CSS3, sifat poligon menawarkan penyelesaian yang berkuasa untuk cabaran ini . Walau bagaimanapun, untuk keserasian penyemak imbas yang lebih luas, teknik Slantastic (http://meyerweb.com/eric/css/edge/slantastic/demo.html) mungkin merupakan alternatif yang lebih baik.

Melaksanakan Slantastic

HTML:

<div class="cornered"></div>
<div class="main">Hello</div>

CSS:

.cornered {
    width: 160px;
    height: 0px;
    border-bottom: 40px solid red;
    border-right: 40px solid white;
}

.main {
    width: 200px;
    height: 200px;
    background-color: red;
}

Pilihan Tambahan

Untuk mencipta sudut dengan sempadan lutsinar dan teks, anda boleh melaksanakan pendekatan alternatif berikut:

HTML:

<div class="outer">
    <div class="cornered">It's possible to put text up here, too...
    </div>
    <div class="main">Hello hello hello hello
    hello hello hello hello hello</div>
</div>

CSS:

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}

.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}

.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Sudut Serong dalam Kotak CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!