好的,所以每个人都知道你可以用这个做三角形:
#triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
Run Code Online (Sandbox Code Playgroud)
这产生了一个坚实的,填充三角形.但是你会怎么做一个类似于空心的箭头状三角形呢?

真的含糊不清的问题,我知道,但我不知道如何描述它们......基本上,我想要这些:

我正在谈论红色的角落里的东西.实现这一目标的最简单方法是什么?显然,你可以在这些形状中制作单独的div,但我觉得让它们处于你想要的位置,即使所有重新调整尺寸和东西都会很痛苦.这是唯一的方法吗?
所以我有这个:
<!DOCTYPE html>
<html>
<head>
<title>The Down-Champlain Regatta</title>
<link rel="stylesheet" href="homepage.css"/>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<script src="jquery-1.11.2.js"></script>
<script src="jquery-ui.js"></script>
</head>
<body>
<div id="topcontainer">
<img src="Images/Kim.jpg" id="tom">
<img src="Images/Kim.jpg" id="zach">
<div id="head">
<p id="a">Hello South Burlington. We're the</p>
<h5>Down Champlain Regatta.</h5>
<p id="s">And we've got a bold new plan for sailing education on Lake Champlain.</p>
</div>
<div id="down">
<p>check it out</p>
</div>
</div>
<div id="container">
<h5>Here's What We're Doing</h5>
<p class="beginning">The most important thing in sailing is experience. Read all the …Run Code Online (Sandbox Code Playgroud)