如何制作css边框形状[重复]答案

【问题标题】：How to make css border shape [duplicate]如何制作css边框形状[重复]
【发布时间】：2013-11-20 01:17:41
【问题描述】：

我使用以下代码创建了一个盒子：

width:153px;
height: 39px;
border: 1px solid #cfcfcf;

它的输出是普通的盒子。但我想让它的形状如下：

---/\---

我必须编写什么 CSS 代码才能使它变成这样？试了很多边框代码都没有用。

【问题讨论】：

标签： css border css-shapes

【解决方案1】：

DEMO

<span class="box"> This is a tooltip! </span>

.box{
  position:relative;
  background:#000;
  color:#fff;
  display:inline-block;
  padding:15px;
  border-radius:5px;
}
.box:after{
  position:absolute;
  content:'';
  left:50%;
  margin-left:-10px;
  top:-20px;
  border: 10px solid transparent;
  border-bottom: 10px solid #000;
}

DEMO

.box{
  position:relative;
  background:#fff;
  display:inline-block;
  padding:15px;
  border-radius:5px;
  border:1px solid #888;
}
.box:after{
  position:absolute;
  content:'';
  height:20px;
  width:20px;
  background:#fff;
  left:50%;
  margin-left:-10px;
  top:-11px;
  border-top:1px solid #888;
  border-left:1px solid #888;

  -webkit-transform: rotate(45deg);  /* Saf3.1+ */     
  -moz-transform: rotate(45deg);  /* FF3.5/3.6 */
  -ms-transform: rotate(45deg);  /* IE 9+ */
  -o-transform: rotate(45deg);  /* Opera 10.5 */
  transform: rotate(45deg);  /* Newer browsers (incl IE9) */
}

【讨论】：

不错的一个....如何将其更改为白色
@404NotFound :) 只需将 #000 更改为 #fff ，反之亦然
我想把 #000 给 /\ 边框...现在它是白色的
@404NotFound 在我的回答中添加了一个演示
@404NotFound 已编辑。添加了一个演示

【解决方案2】：

你必须使用这个语法：

.class:after 
{
 content: '';
position: absolute;
border-width: 10px;
border-style: none solid solid solid;
border-color: transparent transparent black;
right: 0px;
}

【讨论】：

【解决方案3】：

事实证明，是的，你可以。老实说，我无法正确解释它，因为用 css 做多边形是我仍然无法掌握的事情之一。我花了大约 6 次尝试交换边界方向以使三角形指向上方。所以这里是css。

本文包含您需要的一切以及更多内容。 http://css-tricks.com/examples/ShapesOfCSS/#triangle-up

http://jsfiddle.net/9HRBb/

.box {
    width:153px;
    height: 39px;
    border: 1px solid #cfcfcf;
    margin-top:50px;
    position:relative;
}

.box:before {
    position:absolute;
    content:'';
    width:0;
    height:0;
    top:-10px;
    left:50px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:20px solid #cfcfcf;
}

.box:after {
    position:absolute;
    content:'';
    width:0;
    height:0;
    top:-8px;
    left:52px;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:18px solid white;
}

【讨论】：

感谢教程真的帮了我很多..
@Tree 为了帮助你理解三角形，使用 CSS 绘制一个矩形，在里面放一个十字 X，看到（border-bottom）箭头向上了吗？现在为每个边框添加一个宽度，并用一种颜色绘制所需的宽度。