Rumah >hujung hadapan web >html tutorial >用div+css实现三角形，三角形内有字_html/css_WEB-ITnose
用div+css实现三角形，三角形内有字_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 12:25:541939semak imbas
用div+css实现三角形，三角形内有字
如下图：
回复讨论(解决方案)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.a{ border-bottom:1px solid #aaa; height:50px; width:100px; position:relative; overflow:hidden;}.b{ position:absolute; display:block; top:0px; left:0px; width:100px; height:50px;}.b i,.b em{ position:absolute; left:0px; bottom:0px; border-color:transparent; border-color:rgba(255,255,255,0); border-style:solid; border-width:0 50px 50px 50px;}.b i{ border-bottom-color:#aaa;}.b em{ border-bottom-color:#FFF; bottom:-1px;}.text{ position:absolute; bottom:10px; background:none; border:none; outline:none; text-align:center; width:100%;}</style></head><body><div class = "a"> <span class = "b"> <i></i> <em></em> </span> <input type = "text" value = "文字" class = "text"/></div></body></html> 用定位模拟呢的，试试看哦。
用定位模拟呢的，试试看哦。
比下面这个好！
<style type="text/css"> .topdirection { font-size:0; width:0;height:0; line-height:0; border-width:100px; border-style:solid; border-color: transparent transparent #A9DBF6 transparent; } </style> <div><div class="topdirection"></div> <div style="margin:-50px 0px 0px 90px;">重点</div></div> Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：这玩在哪能下载到_html/css_WEB-ITnoseArtikel seterusnya：.clock div{position: absolute;border-style:solid;} 这个是啥意思，谁给说说吧， 不知道咋回事啊_html/css_WEB-ITnose