Rumah hujung hadapan web tutorial css 用transparent做出三角形

用transparent做出三角形

Mar 22, 2018 pm 02:26 PM
segi tiga

这次给大家带来用transparent做出三角形,用transparent做出三角形的注意事项有哪些,下面就是实战案例,一起来看一下。

效果图如下

示例代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 40px auto;
            width: 60px;
            background-color: #f0ac6b;
        }
        .t1{
            margin: 40px auto;
            width: 0px;
            height: 0px;
            /*background-color: #f0ac6b;*/
            border-bottom: 40px solid red;
            border-right: 20px solid transparent;
            border-left: 20px solid transparent;
        }
        .t2{
            margin: 40px auto;
            width: 0px;
            height: 0px;
            /*background-color: #f0ac6b;*/
            border-bottom: 40px solid transparent;
            border-right: 40px solid red;
            /*border-left: 20px solid transparent;*/
        }
        .t3{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-top: 40px solid red;
            border-right: 20px solid transparent;
            border-left: 20px solid transparent;
        }
        .t4{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-top: 40px solid transparent;
            border-left: 40px solid red;
        }
        .t5{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-top: 40px solid red;
            border-right: 40px solid transparent;
        }
        .t6{
            margin: 40px auto;
            width: 0px;
            height: 0px;
            border-left: 40px solid transparent;
            border-bottom: 40px solid red;
        }
        .t7{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-left: 40px solid red;
            border-bottom: 20px solid transparent;
            border-top: 20px solid transparent;
        }
        .t8{
            margin: 40px auto;
            width: 0;
            height: 0;
            border-right: 40px solid red;
            border-bottom: 20px solid transparent;
            border-top: 20px solid transparent;
        }
    </style>
</head>
<body>
<p class="box">
    <p class="t1"></p>
    <p class="t3"></p>
    <p class="t2"></p>
    <p class="t4"></p>
    <p class="t5"></p>
    <p class="t6"></p>
    <p class="t7"></p>
    <p class="t8"></p>
</p>
</body>
</html>
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

CSS3的浏览器兼容问题

设定半透明的元素

CSS3制作粉红色登录界面

Atas ialah kandungan terperinci 用transparent做出三角形. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Program Java untuk mengira luas segi tiga menggunakan penentu Program Java untuk mengira luas segi tiga menggunakan penentu Aug 31, 2023 am 10:17 AM

Pengenalan Program Java untuk mengira luas segi tiga menggunakan penentu adalah program ringkas dan cekap yang boleh mengira luas segitiga diberi koordinat tiga bucu. Program ini berguna untuk sesiapa sahaja yang belajar atau bekerja dengan geometri, kerana ia menunjukkan cara menggunakan pengiraan aritmetik dan algebra asas dalam Java, serta cara menggunakan kelas Pengimbas untuk membaca input pengguna. Program ini menggesa pengguna untuk koordinat tiga titik segi tiga, yang kemudiannya dibaca dan digunakan untuk mengira penentu matriks koordinat. Gunakan nilai mutlak penentu untuk memastikan kawasan sentiasa positif, kemudian gunakan formula untuk mengira luas segi tiga dan memaparkannya kepada pengguna. Program ini boleh diubah suai dengan mudah untuk menerima input dalam format yang berbeza atau untuk melakukan pengiraan tambahan, menjadikannya alat serba boleh untuk pengiraan geometri. pangkat penentu

Program C++ untuk mencetak jadual pendaraban dalam bentuk segi tiga Program C++ untuk mencetak jadual pendaraban dalam bentuk segi tiga Sep 15, 2023 pm 01:21 PM

Untuk mengingati beberapa hasil pendaraban asas dalam bentuk jadual atau grafik, gunakan jadual pendaraban. Artikel ini akan memperkenalkan cara menggunakan C++ untuk menjana jadual pendaraban yang kelihatan seperti segi tiga tepat. Notasi segi tiga berkesan dalam beberapa kes di mana sejumlah besar hasil boleh dihafal dengan mudah. Dalam format ini, jadual dipaparkan baris demi baris dan lajur demi lajur, dengan setiap baris hanya mengandungi entri yang mengisi lajur tersebut. Untuk menyelesaikan masalah ini, kita memerlukan pernyataan gelung asas dalam C++. Untuk memaparkan nombor dalam bentuk segi tiga, kita memerlukan gelung bersarang untuk mencetak setiap baris satu demi satu. Kita akan lihat bagaimana untuk menyelesaikan masalah ini. Mari kita lihat algoritma dan pelaksanaan untuk pemahaman yang lebih baik. Algoritma mengambil bilangan baris jadual pendaraban yang kita mahu, katakan n. Untuk i dari 1 hingga n, lakukan perkara berikut. Untuk j antara 1 hingga i,

Bagaimana untuk mencari ketinggian minimum segi tiga yang diberikan tapak dan kawasan di Jawa? Bagaimana untuk mencari ketinggian minimum segi tiga yang diberikan tapak dan kawasan di Jawa? Aug 26, 2023 pm 10:25 PM

Kami mempunyai kawasan 'a' dan tapak 'b' bagi segi tiga. Mengikut pernyataan masalah, kita perlu mencari ketinggian minimum 'h' menggunakan bahasa pengaturcaraan Java. Seperti yang kita ketahui, apabila tapak dan tinggi diberi, luas segi tiga ialah −$$\mathrm{luas\:=\:\frac{1}{2}\:*\:base\:*\ : Height}$$ Dengan menggunakan formula di atas, kita boleh mendapatkan ketinggian dari -height=(2*luas)/base dan kemudian dengan menggunakan kaedah ceil() terbina dalam, kita boleh mendapatkan ketinggian minimum. Tunjukkan kepada anda beberapa contoh untuk menunjukkan kepada anda terjemahan Bahasa Cina bagi Contoh-1: Contoh-1 Katakan kawasan yang diberi = 12 dan asas = 6 dan kemudian gunakan formula

Penampilan Huawei P70 terdedah, modul segi tiga menambah bukti baharu bentuk Art Irregular Penampilan Huawei P70 terdedah, modul segi tiga menambah bukti baharu bentuk Art Irregular Mar 05, 2024 pm 08:16 PM

Sebelum ini dilaporkan bahawa perdana pengimejan 5G siri P70 Huawei dirancang untuk dikeluarkan pada akhir Mac, dan tiga model baharu, P70, P70Pro dan P70Art, dijangka akan dilancarkan. Kini lebih banyak maklumat tentang reka bentuk penampilan telefon baharu ini telah didedahkan. Seperti yang anda lihat dalam gambar di atas, gambar terbaharu yang bocor menunjukkan bahawa siri Huawei P70 adalah sama dengan khabar angin sebelum ini Dijangka modul belakang P70 dan P70Pro akan menggunakan Deco segi tiga (lihat model tengah di bahagian. gambar di atas), manakala P70Art akan berdasarkan Deco segi tiga Beberapa perubahan, lebih berani dan tidak teratur. Di atas ialah sarung telefon bimbit pihak ketiga Huawei P70 yang didedahkan oleh @digitalchatstation. Apa pendapat anda jika siri Huawei P70 akhirnya kelihatan seperti ini? Maklumat sejarah

Apakah luas segi tiga terbesar yang boleh ditulis dalam segi empat tepat? Apakah luas segi tiga terbesar yang boleh ditulis dalam segi empat tepat? Aug 30, 2023 pm 01:37 PM

Segi empat tepat ialah segiempat dengan sisi bertentangan sama dan selari. Sisi bersebelahan membentuk 90°. Segitiga ialah rajah tertutup dengan tiga sisi. Segitiga terbesar yang ditulis dalam segi empat tepat. Tapaknya sama dengan panjang segi empat tepat, dan tinggi segi tiga sama dengan lebar segi empat tepat. Luas = (½)*l*b Luas segi tiga terbesar yang ditulis dalam segi empat tepat = (½)*l*b Program untuk mengira luas segi tiga terbesar dalam segi empat tepat - kod sampel #include<stdio. h>intmain(void){ intl= 10,b=9;

Bagaimana untuk menyemak kesahihan segitiga di Jawa, apabila diberi panjang sisi? Bagaimana untuk menyemak kesahihan segitiga di Jawa, apabila diberi panjang sisi? Sep 09, 2023 pm 10:53 PM

Seperti yang kita sedia maklum, segitiga ialah poligon dengan 3 sisi. Ia terdiri daripada tiga tepi dan tiga bucu. Jumlah tiga sudut pedalaman ialah 180 darjah. Dalam segi tiga yang sah, jika anda menambah mana-mana dua sisi, ia akan lebih besar daripada sisi ketiga. Mengikut penyataan masalah kami, kami perlu menyemak sama ada segitiga itu sah jika diberikan tiga sisi menggunakan bahasa pengaturcaraan Java. Oleh itu, kita mesti menyemak sama ada tiga syarat berikut dipenuhi. Jika berpuas hati, segitiga itu sah, jika tidak segitiga itu tidak sah. Katakan a, b, c ialah tiga sisi segitiga. a+b>cb+c>ac+a>b menunjukkan kepada anda beberapa contoh Contoh 1 Jika sisi ialah a=8, b=9, c=5 maka dengan menggunakan logik di atas, a+b=8+9=17 yang mana

Jika tidak lebih daripada dua titik dalam satah adalah kolinear, berapakah bilangan segi tiga? Jika tidak lebih daripada dua titik dalam satah adalah kolinear, berapakah bilangan segi tiga? Sep 05, 2023 pm 12:33 PM

Mari lihat cara mengira bilangan segi tiga pada satah diberi n mata, dan hadkan bilangan titik kolinear kepada tidak lebih daripada dua. Mengira bilangan segi tiga dalam satah dengan tidak lebih daripada dua titik kolinear adalah masalah biasa dalam geometri pengiraan, yang mempunyai aplikasi dalam grafik komputer, pemprosesan imej dan bidang sains komputer yang lain. Contohnya, apabila mencipta imej 2D daripada pemandangan 3D dalam grafik 3D, masalah mengira segi tiga dalam satah dengan tidak lebih daripada dua titik kolinear mungkin timbul. Dalam kes ini, proses pengiraan segi tiga boleh digunakan untuk menentukan bilangan segi tiga yang terdapat dalam imej 2D akhir selepas menayangkan pemandangan 3D pada satah. Ini membolehkan anda menentukan kerumitan adegan dan meningkatkan kelajuan pemaparan. Dalam pemprosesan imej, kita mungkin ingin mengira bilangan objek atau bentuk unik dalam imej Masalah ini sangat

Program C++ untuk menguji warisan melalui kelas segitiga Program C++ untuk menguji warisan melalui kelas segitiga Aug 26, 2023 am 09:57 AM

Katakan kita ingin mencipta kelas Segitiga dan subkelas lain yang dipanggil Isosceles. Kelas Segitiga mempunyai fungsi untuk mencetak bahawa objek adalah jenis segitiga, manakala Isosceles mempunyai dua fungsi untuk memaparkan bahawa ia adalah segitiga sama kaki dan penerangan. Kita juga perlu memanggil fungsi kelas induk melalui objek kelas Isosceles. Tanpa input yang betul, kami hanya memanggil fungsi dengan cara yang sesuai. Jadi, jika input adalah untuk mentakrifkan objek bernama trg dan kemudian panggil trg.isosceles(), trg.description(), trg.triangle(), maka outputnya ialah Ini ialah segitiga sama kaki dalam segi tiga sama kaki

See all articles