CSS绘制三角形

来源：互联网发布：服务器和客户端端口编辑：程序博客网时间：2024/05/18 09:40
<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">#triangle-up {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 100px solid red;}#triangle-down {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-top: 100px solid red;}#triangle-left {    width: 0;    height: 0;    border-top: 50px solid transparent;    border-right: 100px solid red;    border-bottom: 50px solid transparent;}#triangle-right {    width: 0;    height: 0;    border-top: 50px solid transparent;    border-left: 100px solid red;    border-bottom: 50px solid transparent;}#triangle-topleft {    width: 0;    height: 0;    border-top: 100px solid red;    border-right: 100px solid transparent;}#triangle-topright {    width: 0;    height: 0;    border-top: 100px solid red;    border-left: 100px solid transparent; }#triangle-bottomleft {    width: 0;    height: 0;    border-bottom: 100px solid red;    border-right: 100px solid transparent;}#triangle-bottomright {    width: 0;    height: 0;    border-bottom: 100px solid red;    border-left: 100px solid transparent;}</style></head><body><div style="position: absolute;left: 0px;" id="triangle-up"></div><div style="position: absolute;left: 200px;" id="triangle-down"></div><div style="position: absolute;left: 400px;" id="triangle-left"></div><div style="position: absolute;left: 600px;" id="triangle-right"></div><div style="position: absolute;top:150px;left: 0px;" id="triangle-topleft"></div><div style="position: absolute;top:150px;left: 200px;" id="triangle-topright"></div><div style="position: absolute;top:150px;left: 400px;" id="triangle-bottomleft"></div><div style="position: absolute;top:150px;left: 600px;" id="triangle-bottomright"></div></body></html>
0 0