简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

用div+css实现三角形，三角形内有字_html/css_WEB-ITnose

WBOY
發布： 2016-06-24 12:25:54
原創
1862 人瀏覽過

用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>
登入後複製

相關標籤：
用div+css实现三角形，三角形内有字
來源：php.cn
上一篇：这玩在哪能下载到_html/css_WEB-ITnose 下一篇：.clock div{position: absolute;border-style:solid;} 这个是啥意思，谁给说说吧， 不知道咋回事啊_html/css_WEB-ITnose
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
管理 DDD 中聚合之間的「使用者」實體 我正在嘗試使用DDD和六邊形架構將整體式應用程式重寫到模組化整體式應用程式上。首先嘗試提取三個模組（聚合）：「Shared」、「User」和「Article」。據我正確理解，「使用...
來自於 2024-04-04 09:54:15
0
1
361
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！