Home > Article > Web Front-end > How to use CSS to achieve a small triangle effect_html/css_WEB-ITnose
How to use CSS to achieve a small triangle effect_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:231453browse
How to use CSS to achieve the small triangle effect:
Among many web page effects, there are applications of the small triangle effect, which can increase the aesthetics of a specific application, as follows Just give a piece of example code, which introduces two ways to achieve the effect of a small triangle head. The code is as follows:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>三种纯CSS实现三角形的方法</title><style type="text/css">.message-box { position:relative; float:left; margin:80px 0 0 100px; width:240px; height:60px; line-height:60px; border:1px solid #000; text-align:center; color:#0C7823;}.triangle-border { position:absolute; left:100px; overflow:hidden; width:0; height:0; border-width:10px; border-style:none dashed solid dashed;}.tb-border { top:-10px; border-color:#000 transparent #000 transparent;}.tb-background { top:-9px; border-color:transparent transparent #fff transparent;}/*字符*/.triangle-character { position:absolute; left:100px; overflow:hidden; width:26px; height:26px; font:normal 26px "宋体";}.tc-background { top:-12px; color:#FFF;}.tc-border { top:-13px; color:#000;}</style></head><body><div class="message-box"> <span> border 属性实现</span> <div class="triangle-border tb-border"></div> <div class="triangle-border tb-background"></div></div><div class="message-box"> <span> ◆ 字符实现</span> <div class="triangle-character tc-border">◆</div> <div class="triangle-character tc-background">◆</div></div></body></html> The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/505.html
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Usage of CSS vertical-align attribute_html/css_WEB-ITnoseNext article：Usage of CSS vertical-align attribute_html/css_WEB-ITnose