CSS3: 不規則なICON_html/css_WEB-ITnoseを上品に描画

朝、w3ctech で中国の第 2 回 CSS カンファレンスの概要を見たとき、私は本当に嬉しかったです

去年 MOOC で最初の CSS カンファレンスのビデオを見て以来、誰もがショックを受けていました。 CSS について議論することに特化したカンファレンスであり、共有された CSS の知識は本当に目を見張るものがあります

私がブログ パークで書いた最初のブログ投稿「Flexbox、レイアウト アーティファクト」は、最初の CSS Conf からインスピレーションを得たものです

私たちは、「CSS の楽しさを取り戻す (パート 1)」の内容しか見ていませんが、今、第 2 セッションで共有されたビデオと PPT を見て、とても刺激を受けています

今日の記事のテーマは、css3 を使用して次の共有アイコンを実装することです:

以前に何度も同じようなシーンを css3 で処理したことがあります:

そのため、外枠部分はすぐに実装されましたスムーズに:

実装コード

	<!--分享icon-->	<div class="icon">		<i class="short top-short"></i>		<i class="short right-short"></i>		<i class="icon-triangle"></i>		<i class="irregular"></i>	</div>

	/**	 *@ css3 分享按钮icon	 *@ author:kevin	 *@ 2015/8/15	 */    .icon	{	    position: relative;	    width: 180px;	    height: 180px;	    margin: 300px auto;	    border-bottom: 20px solid #333;	    border-left: 20px solid #333;	}	.short	{	    position: absolute;	    width: 50px;	    height: 20px;	    background-color: #333;	}	.top-short	{	    top: 0;	    left: 0;	}	.right-short	{	    right: -15px;	    bottom: 0;	    transform: rotate(90deg);	}	.top-short:after	{	    position: absolute;	    right: -20px;	    display: block;	    content: '';	    border-width: 0 0 20px 20px;	    border-style: solid;	    border-color: transparent transparent transparent #333;	}	.right-short:after	{	    position: absolute;	    left: -20px;	    display: block;	    content: '';	    border-width: 20px 0 0 20px;	    border-style: solid;	    border-color: #333 transparent transparent transparent;	}

しかし、不規則な「鷲のくちばし」を実装することになると、これまでCSSを使用して同様の不規則なグラフィックを処理したことがなかったため、開始できませんでした。 ;

「CSS の楽しみを取り戻す (パート 1)」で、著者は「鷲のくちばし」を実装するアイデアを明確に示しています:

ここにブロックがあります境界線と丸い角を持つ要素。その 2 つの境界線は円弧で接続されます。

まず第一に、境界フィレットは 2 つの半径値 (r1 と r2) を指定できます。下の図):

これら 2 つの半径の値が等しい場合、2 つの境界線を結ぶ円弧は標準の 1/4 円弧になります。それらが等しくない場合 (たとえば、r2 を減らす場合)、次の効果が得られます:

2 つの境界線を結ぶ円弧が 1/4 の楕円弧になることがわかります。この真実は私たちの問題を大規模に解決します。次に、形状に対処する必要があります。

2 番目の真実は、異なる方向の境界線の太さ (下の図の w1 と w4) も異なる可能性があるということです。

w4 の値を徐々にゼロにすると、次のようになります。この形状を取得します:

上記の内容はhttps://github.com/cssmagic/blog/issues/52

作者: cssmagic

Myセルフハンズ-練習では、最初にいくつかの間違いを犯しましたが、その間違いの結果は非常に興味深いものでした:

例:

	      .irregular {			width: 100px;			height: 60px;			position: absolute;			top: 0;			right: 0;			bottom: 0;			left: 0;			margin: auto;			transform: rotate(-15deg);			background-color: #333;			border-radius: 62px 0px;			}	

最終的な効果:

オンラインデモ

.irregular{    position: absolute;    top: 22%;    right: 0;    bottom: 0;    left: 0;    display: inline-block;    width: 120px;    margin: auto;    border-top: 40px solid #333;    border-left: 0 solid #333;    border-radius: 100px 0;}.irregular:after{    position: absolute;    top: -70px;    right: -40px;    display: block;    content: '';    border-width: 50px 0 50px 50px;    border-style: solid;    border-color: transparent transparent transparent #333;}

cssmagic の引用 この記事は 1 段落で終わります:

実際、近年、CSS の分野で多くの優れたものが登場しています:

それらについて聞いたとき、理解しました。 、そしてそれらを使用しました、私の気分はどうですか??

右側の小さな男の子は私です。私の気分は興奮、新鮮さ、そして興奮です。