ホームページ >ウェブフロントエンド >htmlチュートリアル >border-width は返信の効果を実装します_html/css_WEB-ITnose
border-width は返信の効果を実装します_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:37:341149ブラウズ
1. 発見
ブログパークにアクセスすると、次のようなブログのコメントをよく見かけます:
最初は写真で終わったのかと思ったんですが、うーん…。 Blog Park のようなアクセス数の多い Web サイトの場合、js/css で実装できれば画像に置き換えられることはありません。よく見ると 2 つのスパンでこの効果を実現できることがわかります。
2. 気づき
自分にできないことや不明な点があると、常に調べて自分のものにしたいと思っています。次に、この効果を達成するために時間をかけてください。
2.1 例として、span 設定 border-width:20px を取り上げます。これは、40*40 の正方形 (上下 (20*2)、左右 (20*2)) に相当し、4 つに分割されます。等しい部分 上下左右の合同な三角形を 4 つだけ均等に分割するにはどうすればよいでしょうか。この場合、次の効果を簡単に実現できます:
2.2 上記の方法では、スパンを使用して次の効果を実現することもできます:
このようにして、水色の部分を白に置き換えます。オクルージョンを実現し、絶対位置決めを通じて希望する効果を実現できます。
2.3 完全なコード
<!DOCTYPE><html><head> <title>css实现博客园回复效果</title> <style type="text/css"> *{margin:0;padding:0;} #reply{ width:600px; margin:0 auto; } .reply_item{ padding:10px 20px; border-bottom:1px solid #EDD98B; } .reply_img{ float:left; } .reply_img a{ float:left; margin-top:20px; text-decoration:none; color:#fff; } .reply_img img{ width:60px; height:60px; border-radius:40px; } .reply_content{ margin-left:110px; background:#beceeb; padding:30px 20px; border-radius:18px; position:relative; } .dot{ border-style:solid; border-width:20px; border-color:#fff #beceeb #beceeb #fff; position:absolute; left:-40px; top:40px; } .top{ border-style:solid; border-width:10px 20px; border-color:transparent #fff #fff transparent; position:absolute; left:-40px; top:60px; } </style></head><body> <div id="reply"> <div class="reply_item"> <div class="reply_img"> <a href="http://www.cnblogs.com"> <img src="1.jpg" alt="用户头像" /> </a> </div> <div class="reply_content"> 好文，要攒 <div class="dot"></div> <div class="top"></div> </div> </div> </div></body></html> 2.4 レンダリング:
3. 概要
簡単なデモ、ここに小さなメモがあります。自分でコードを入力しないと、そのコードはあなたのものになりません。時間があるときに庭園を訪れると、必ず何か得るものがあります。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。