::before と ::after を使用して鋭いコーナー効果を完成させます_html/css

::before と ::after を使用して鋭いコーナー効果を完成させます_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:36:21

オリジナル

2051 人が閲覧しました

1. 目標

次の画像効果を完成させることが目標です:

2. 完了

1. 分析

::before および ::after 疑似要素の使用法に関する記事では、次のことができると述べられています。 ::before と ::after を使用して六角形を完成させます。この例では、#star-six を使用して正三角形を完成させ、::after を使用して逆三角形を実装し、それを絶対配置で配置します。次もこのアイデアを使用します。

2. 完了

最初のステップは、ブラウザ内でテキストを中央に配置するために次の基本的な効果を完成させることです

コードは次のとおりです:

<style>.middle{text-align:center;}.title{background-color:black;color:#f3e14f;display:inline-block;font-size:18px;height:40px;line-height:40px;padding:0 50px;}</style><div class="middle"><h5 class="title">升级有好礼</h5></div>

ログイン後にコピー

2 番目のステップは、上に尖った効果を作成することです。左側と右側。五芒星を作るコードに合わせて改造することができます。

コードは次のとおりです:

<style>#star-three {  width: 0;  height: 0;  border-left: 100px solid transparent;  border-top: 50px solid red;  border-bottom: 50px solid red;/*  position: relative;*/}</style><div id="star-three"></div>

ログイン後にコピー

3 番目のステップでは、::before を使用して、2 番目のステップの効果を実現します。

コードはまだ 2 番目のステップのコードですが、::before を忘れずに記述してください。次にサイズを調整します。

.title::before{  width: 0;  height: 0;  border-left: 40px solid transparent;  border-top: 20px solid red;  border-bottom: 20px solid red;  content: "";}

ログイン後にコピー

境界左に青を設定すると、次のような効果が得られます。 [原理がまだよくわかりませんが、この高さは何でしょうか？ ? 】

これは一体何ですか？望ましい効果ではありません。この時点でレイアウトを調整する必要があります。

4 番目のステップは、絶対配置を使用してレイアウトを調整することです。

.title は相対を設定し、.title::before は絶対を設定します。効果は以下の通りです。

5番目のステップは、左で調整することです。

.title{background-color:black;color:#f3e14f;display:inline-block;font-size:18px;height:40px;line-height:40px;position:relative;padding:0 50px;}.title::before{  width: 0;  height: 0;  border-left: 40px solid transparent;  border-top: 20px solid red;  border-bottom: 20px solid red;  content: "";  position:absolute;  left:-40px;}

ログイン後にコピー

ステップ 6、同様に、::after を使用して、右側の効果を実現します。

.title::after{  width: 0;  height: 0;  border-right: 40px solid transparent;  border-top: 20px solid red;  border-bottom: 20px solid red;  content: "";  position:absolute;  right:-40px;}

ログイン後にコピー

ステップ 7、色を変更するだけです。

完全なコードは次のとおりです:

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>demo of starof</title><style>.middle{text-align:center;}.title{background-color:black;color:#f3e14f;display:inline-block;font-size:18px;height:40px;line-height:40px;position:relative;padding:0 50px;}.title::before{  width: 0;  height: 0;  border-left: 40px solid transparent;  border-top: 20px solid black;  border-bottom: 20px solid black;  content: "";  position:absolute;  left:-40px;}.title::after{  width: 0;  height: 0;  border-right: 40px solid transparent;  border-top: 20px solid black;  border-bottom: 20px solid black;  content: "";  position:absolute;  right:-40px;}</style></head><body><div class="middle">  <h5 class="title">升级有好礼</h5></div></body></html>

ログイン後にコピー

Effect

starof、この記事の著者、知識自体は変化しており、著者も常に学習して成長しており、コンテンツ記事の内容も随時更新しますので、読者の誤解を招くことを避けるため、出典をたどるのに便利です。転載の際は出典を明記してください。ご不明な点がございましたら、お気軽に相談して一緒に進めてください。。