検索
ホームページウェブフロントエンドhtmlチュートリアル虎扯:纯css3各方向小三角的制作原理分析 - 小老虎的牙

 

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

One:不浪费自己的时间,

Tow:不浪费读者的时间,

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

 


 

 

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

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

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

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

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

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

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

 

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

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

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

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

 


 

 

哥们上代码:举个梨子

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

<div class="up"></div>

 

.up{
	position: absolute;;  /*这里咱可以视情况而定*/
	border-left:30px solid transparent;  /*口诀,左,右边成透明*/
        border-right:30px solid transparent;  /*30px可以控制三角的大小*/
        border-bottom:30px solid black;  /*口诀,相反线,给颜色*/
	width: 0;
	height: 0; /*否则小三角在block状态下,会拉满宽度*/
}

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

 

 

 


 

 

哥们上代码(2)

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

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

<div class="left-top"><div/>

 

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

 

效果图:(完美哦!!)

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

 

主要的用途:

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

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

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

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

 


 

 

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

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

 

片尾声明:

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

要关注你哦

 

最后的落款:

16-03-10日,

环境还是不错的,

周围室友愉快的斗地主

 

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLの役割:Webコンテンツの構造HTMLの役割:Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割:コアの責任HTML、CSS、およびJavaScriptの役割:コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか?HTMLは初心者のために簡単に学ぶことができますか?Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか?HTMLでの開始タグの例は何ですか?Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は?メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか?オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか?Apr 05, 2025 pm 01:21 PM

WebコードエディターのHTML要素分析では、多くのオンラインコードエディターを使用すると、ユーザーはHTML、CSS、およびJavaScriptコードを入力できます。最近、誰かが提案した...

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)