Bagaimana untuk Mencipta Segi Tiga Lutsinar dengan Sempadan Hitam Menggunakan CSS?

Mencipta Segi Tiga Lutsinar dengan Sempadan Menggunakan CSS

Soalan:

Bagaimana kita boleh buat segitiga lutsinar dengan sempadan hitam menggunakan CSS, tidak termasuk SVG vektor?

Jawapan:

Penyelesaian WebKit Sahaja:

Pendekatan eksklusif WebKit melibatkan penggunaan watak ▲:

<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false">

.segitiga {
-webkit-text-stroke: 12px hitam ;
warna: lutsinar;
saiz fon: 200px;
}

<pre class="brush:php;toolbar:false">

<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false">

▲

<pre class="brush:php;toolbar:false">

Kaedah ini menghasilkan bentuk segi tiga menggunakan harta WebKit-specific -webkit-text-stroke, yang menggariskan teks dengan pukulan warna dan ketebalan yang ditetapkan. Teks itu sendiri ditetapkan kepada lutsinar, menjadikan segi tiga itu telus dengan berkesan.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Segi Tiga Lutsinar dengan Sempadan Hitam Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!