Rumah hujung hadapan web html tutorial 前端小tips,纯css3各方向小三角的制作原理_html/css_WEB-ITnose

前端小tips,纯css3各方向小三角的制作原理_html/css_WEB-ITnose

Jun 24, 2016 am 11:24 AM

 

入驻博客园两个月之后的第一篇随笔,希望能够做到三个原则:

One:不浪费自己的时间,

Tow:不浪费读者的时间,

第三就是希望有缘的朋友们多多指教,共度前端快乐的大坑!!!

 

 

 

咱们今天来做一个居家旅行必备的小tips,展现前端老前辈的智慧,积淀的文化...

先来一个小口诀【呆会会用到的,不用着急记住它哦】

四方小三角(上,下,左,右)

尖角反方线,给颜色  /*设置边线*/

两边夹角线成透明  /*设置边线*/

参数都相同  /*线的参数都一样*/

给予三条边  /*有三条边哦*/

 

八方小三角(左上,左下,右上,右下)

左右相反成透明 /*设置边线*/

上下相同给颜色  /*设置边线*/

送你两条边  /*好方便,就两条边*/

 

 

 

哥们上代码:举个梨子

四方来角之(up,up,up上)来个div盒子,是否可以用其他的容器?(哥们没试过,够用就好)

<div class="up"><div/>
Salin selepas log masuk

.up{	position: absolute;;  /*这里咱可以视情况而定*/	border-left:30px solid transparent;  /*口诀,左,右边成透明*/        border-right:30px solid transparent;  /*30px可以控制三角的大小*/        border-bottom:30px solid black;  /*口诀,相反线,给颜色*/	width: 0;	height: 0; /*是否加上宽高0,自己试验哦,博主试过可以不加*/}
Salin selepas log masuk

结果是:这样的(无视小鼠标)

哥们上代码(2)

先复习一遍口诀,向上向上走...

然后再来,举个梨子(八方来角之“left-top,left-top,left-top左上”)

<div class="left-top"><div/>
Salin selepas log masuk

.left-top{	position: relative;	border-top: 30px solid lawngreen;  /*发现没有上下相同,设置颜色*/<br />        border-right: 30px solid transparent; /*左右相反,给透明*/        width: 0;      /*只有两条边的设置哦*/  	height: 0;}
Salin selepas log masuk

 

效果图:(完美哦!!)

其中的口诀,可以完全使用,最主要的好处就是可以不用记住源码,自己手写的css然后在网页中完美显示的感觉就是“这个feel倍爽,倍爽...”

 

主要的用途:

“导航栏中的小三角指向”

“其他暂时没有发现,哈哈哒..”

如果小白同志看见这篇文章的时候,就联系我吧,菜鸟见小白,哥俩泪汪汪

有幸被大神看见,那是三生有幸,希望指导一二

 

 

 

到这为止,小三角tips的博文就玩了,其中原理可理解也可不理解,网上有一大堆的源码,直接拿过来用就是了,但是不符合咱可贵的极客精神

 来一起念一遍“极客精神,极客精神..”

 

片尾声明:

本文的原理是博主自己的收集理解,经过测试完全没有问题,当然也不排除有其他的方式达到这种效果,各位前端的博友有志同道合的请关注我或者我

要关注你哦

 

最后的落款:

16-03-10日,

环境还是不错的,

周围室友愉快的斗地主

 

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

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

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)

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,

Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Mar 12, 2025 pm 04:05 PM

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

See all articles