border-width实现回复效果_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

border-width实现回复效果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:37 AM

一、发现

前端渣哥逛博客园，经常看到博文评论有这种如下这种效果：

开始还以为是用图片实现的，额...。像博客园这种访问量大的网站，能用js/css实现的就不会用图片代替，果然，仔细一看，两个span就能实现这个效果了。

二、实现

看到不会或者不清楚的，总想探个究竟，并把知识变成自己的。接下来就花点时间，实现这种效果。

2.1 以span 设置 border-width:20px; 为例，这样相当于一个 40*40 的正方形（上下(20*2)和左右(20*2)），然后平分成4份，怎么平分呢，上下左右4个全等三角型就是了。既然这样，我们就可以轻松实现以下效果了：

2.2 有了上面的做法，我们同样可以再用一个span，实现如下效果：

这样，把浅蓝色部分换成白色，就可以实现遮挡，再通过绝对定位，就可以实现我们想要的效果了。

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="/static/imghwm/default1.png"  data-src="1.jpg"  class="lazy" alt="用户头像" />                </a>            </div>            <div class="reply_content">                好文，要攒                <div class="dot"></div>                <div class="top"></div>            </div>        </div>    </div></body></html>

2.4 效果图：

三、总结

一个简单的demo，以此小记。代码不自己敲就不是你的，有空逛逛园子总会有收获。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。