Use div css to implement a triangle, with words inside the triangle_html/css

Use div css to implement a triangle, with words inside the triangle_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:25:54

Original

1943 people have browsed it

Use div css to implement a triangle with words inside the triangle
as shown below:

Reply to discussion (solution)

<!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>

Copy after login

It uses positioning simulation, give it a try.

It uses positioning simulation, give it a try.

Better than this one!

<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>

Copy after login