CSS pour implémenter des flèches et des boîtes d'invite avec des espaces-Questions et réponses frontales-php.cn

CSS pour implémenter des flèches et des boîtes d'invite avec des espaces

jacklove

Libérer： 2018-06-20 16:00:11

original

2544 Les gens l'ont consulté

1. Implémentez les flèches comme indiqué sur l'image

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
.out{
	width: 200px;
	height: 200px;
	background: #f00;
	position: relative;
}
.word{
	position: absolute;
	left: 60px;
	line-height: 40px;
}
.triangle-out{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0px;
	height: 0px;
	display: block;
	border-top: 20px solid #f00;
	border-right: 20px solid #f00;
	border-bottom: 20px solid #f00;
	border-left: 40px solid #ff0;
}
.triangle-in{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0px;
	height: 0px;
	display: block;
	border-top: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #f00;
}
</style>
</head>
<body>
	<p class="out">
		<span class="triangle-out"></span>
		<span class="triangle-in"></span>
		<span class="word">read more</span>
	</p>
</body>
</html>

Copier après la connexion

2. Implémentez la boîte d'invite crantée

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>带缺口的提示框-/</title>
<style>
.wrap{
	font-size: 12px;
	margin:40px auto;
	width:600px;
}
.ui-slider-tooltip{
	background:#FCFDFD; 
	border:1px solid green;
	color:#222222;
	display: block;
	text-align: center;
	padding: 5px 3px 5px 3px;
	width: 190px;	
	position: relative; 
}
.ui-corner-all {
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-left-radius:5px 5px;
	-webkit-border-top-right-radius:5px 5px;
	-webkit-border-bottom-right-radius:5px 5px;
	-webkit-border-bottom-left-radius:5px 5px;
}
.ui-tooltip-pointer-down {
	border-bottom-width: 0;
	border-left: 7px dashed transparent; 
	border-right: 7px dashed transparent;
	border-top: 8px solid green;
	bottom:	-8px;
	display: block;
	height:0;
	left: 50%;
	margin-left: -7px;
	position: absolute; 
	width:0;
}

.ui-tooltip-pointer-down-inner {
	border-left: 6px dashed transparent; 
	border-right: 6px dashed transparent;
	border-top: 7px solid #fff;
	left: -6px;
	top: -9px;
	position: absolute; 
}

.a{
	display: block;width:0;height:0;
	border-left: 7px dashed transparent; 
	border-right: 7px dashed transparent;
	border-top: 8px solid green;
	border-bottom: 0;
	position: absolute;
}
.b{
	position: absolute; 
	border-left: 6px dashed transparent; 
	border-right: 6px dashed transparent;
	border-top: 7px solid #fff;
	top: -9px;
	left: -6px;
}
</style>
</head>
<body>
<p class="wrap">
	<h1>用CSS实现带缺口的提示框</h1>
	<span class="a">
		<span class="b"></span>
	</span>
	<br/>
	<span class="a">
		<span class="b" style="top:-11px;"></span>
	</span>
	<br/>


	<span class="ui-slider-tooltip  ui-corner-all">
		<span>带缺口提示框</span>
		<span class="ui-tooltip-pointer-down">
		<span class="ui-tooltip-pointer-down-inner" ></span>
		</span>
	</span>
	<br/>
	<span class="ui-slider-tooltip  ui-corner-all" style="background: #f00">
		<span>加个背景就可以看清原理啦</span>
		<span class="ui-tooltip-pointer-down">
		<span class="ui-tooltip-pointer-down-inner" ></span>
		</span>
	</span>
</p>
</p>
</body>
</html>

Copier après la connexion

En fait, il s'agit d'utiliser une boîte avec une largeur et une hauteur de 0, de définir la bordure, d'obtenir le triangle souhaité et de créer l'effet d'une flèche grâce à l'affichage en superposition de triangles~

Cet article explique css Implémenter des flèches et des boîtes d'invite crantées Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois.

Recommandations associées :

Les ingénieurs front-end acquièrent des connaissances de base

À propos des bases de JavaScript

Explications connexes sur la conception orientée objet Explications connexes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!