HTML伪元素

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
		<style type="text/css">
			#d1 {
				width: 0px;
				height: 0px;
				/* background: paleturquoise; */
				/* border: 8px solid #FF00FF; */
				/* transparent 透明 */
				border-top: 200px solid transparent;
				border-bottom: 200px solid transparent;
				border-right: 200px solid transparent;
				border-left: 200px solid #ff0000;
			}
			.chat{
				width: 500px;
				line-height: 100px;
				padding: 30px;
				font-size: 30px;
				background: greenyellow;
				margin: 0 auto;
				border-radius: 30px;
				/* 相对定位 */
				position: relative;
			}
			/* content 设置里面的内容 */
			/* 注意:
			 创建伪元素的时候,content属性必须写!!!
			 */
			.chat::before{
				
				/* content: "111"; */
				content:"";
				width: 0px;
				height: 0px;
				display: inline-block;
				border-top: 25px solid transparent;
				border-bottom: 25px solid transparent;
				border-right: 50px solid greenyellow;
				border-left: 50px solid transparent;
				/* 绝对定位 */
				position: absolute;
				left: -100px;
				top: 28px;
				
			}
			.chat::after{
				/* content: "22"; */
			}
		style>
	head>
	<body>
		<div id="d1">div>
		<div class="chat">
			今天晚上吃啥?
		div>
	body>
html>

HTML伪元素_第1张图片

你可能感兴趣的:(html,html5)