CSS-Layout Ribbon

最近在设计页面的时候，用到了css布局中的一个Ribbon布局，样子如下图所示：

刚开始打算用这个样式作为文章的标题，后来暂时没有使用，但是在学习这个布局的时候，积累了很多css的知识，今天在此记录一下，方便以后查找温习。

首先，我贴出这部分代码的dom结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Ribbons设计 - 实例</title>
    <link rel="stylesheet" type="text/css" href="./ribbon.css" />
</head>

<body>
	<div class="ribbon">
		<!-- The left side -->
		<div class="ribbon__side ribbon__side--l"></div>

		<!-- The left triangle displayed below the content -->
		<div class="ribbon__triangle ribbon__triangle--l"></div>

		<!-- The right triangle displayed below the content -->
		<div class="ribbon__triangle ribbon__triangle--r"></div>

		<!-- The right side -->
		<div class="ribbon__side ribbon__side--r"></div>

		<!-- The content -->
		<div class="ribbon__content"></div>
	</div>
</body>
</html>

然后再贴出对应的ribbon.css的代码

.ribbon {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Size */
    height: 2rem;

    /* Use to position the corners */
    position: relative;
	
	width: 6rem;
	margin : 6rem auto;
}

.ribbon__content {
    /* Background color */
    background-color: #9ca3af;
    z-index: 1;

    height: 100%;
    width: 100%;
}
.ribbon__side {
    bottom: -0.5rem;
    position: absolute;

    /* Displayed under the ribbon */
    z-index: 1;

    /* Background */
    border: 1rem solid #d1d5db;
}

.ribbon__side--l {
    /* Position */
    left: -1.5rem;
    border-color: #d1d5db #d1d5db #d1d5db transparent;
}

.ribbon__side--r {
    /* Position */
    right: -1.5rem;
    border-color: #d1d5db transparent #d1d5db #d1d5db;
}

.ribbon__triangle {
    position: absolute;
    top: 100%;

    border: 0.5rem solid transparent;
    border-bottom-width: 0;
    border-top-color: #1c1919;
	z-index:2;
}

.ribbon__triangle--l {
    border-right-width: 0;
    left: 0;
}

.ribbon__triangle--r {
    border-left-width: 0;
    right: 0;
}

注释部分解释了各部分代码在实现这个样式的时候起到的作用。我们来具体分析和研究一下：

从这个ribbon的dom结构可以看出，它有最外部的容易.ribbony以及内部的五个部分组成，分别是左右的支出去的两部分结构，内容区下面的三角形以及具体的内容区组成。

首先看看这两个支出去的部分是怎么实现的呢？

它们的代码如下：

.ribbon__side {
    bottom: -0.5rem;
    position: absolute;

    /* Displayed under the ribbon */
    z-index: 1;

    /* Background */
    border: 1rem solid #d1d5db;
}

.ribbon__side--l {
    /* Position */
    left: -1.5rem;
    border-color: #d1d5db #d1d5db #d1d5db transparent;
}

.ribbon__side--r {
    /* Position */
    right: -1.5rem;
    border-color: #d1d5db transparent #d1d5db #d1d5db;
}

我们知道父元素是相对定位(position:relative)，而这里的两个元素采用了绝对定位，而共同点是bottom:0.5rem;然后一个向左，一个向右，分别都是-1.5rem;最后都设置border为1rem；并且border有三个方向有颜色，而一个方向透明，显然，如果是左边支出的那部分，显然是左边的border-color为透明的颜色，按照上右下左的原理，border-color: #d1d5db #d1d5db #d1d5db transparent;的最左边的颜色为透明。同样的到来，右边支出的部分应该是右方的颜色为透明，同理按照上右下左的原理，border-color: #d1d5db transparent #d1d5db #d1d5db;最右边的颜色为透明。

至于这里为什么这样设置border就会出现这样的形状呢？可以参考这篇文章(css绘制三角形原理-border)

简单说明一下：

.t2 {
  width: 50px;
  height: 50px;
  border: 2px solid orange;
}

我们使用border的时候一般只是小小的一段，大家可能会觉得border是有四个小矩形拼接而成；然而实际上呢？请看下面的例子：

.t2 {
  width: 100px;
  height: 100px;
  border: 40px solid;
  border-color: orange blue red green;
}

我们可以看到明显的border的四条边不是长方形，而是梯形，很像相框的四条边。

我们再思考一下极端的情况，我将这个dom的width和height都设置为0；

.t2 {
  width: 0;
  height: 0;
  border: 40px solid;
  border-color: orange blue red green;
}

大家看到了没，实际上是不是就是四个不同颜色的小三角形拼接而成的，如果你想实现其他的效果，是不是只需要让其中的某些三角形的颜色透明就OK啦。

好啦，我上面的例子实际上是不是就是让左边的三角形透明就达到效果啦。

这里有个问题，为什么在ribbon的css中没有设置宽度和高度；其实是这样的，没有设置宽度和高度的时候，默认是auto，并且这个dom中也没有文字其他的，它的实际宽度和高度其实就是0；

如果大家感兴趣的话，可以在<div class="ribbon__side ribbon__side--l"></div>这个dom中添加一些内容，此时这个dom结构会变大，而图形也将不再是原来的结构，如图所示：

这时，如果将此dom结构的宽度和高度设置为0；

.ribbon__side {
    bottom: -0.5rem;
    position: absolute;

    /* Displayed under the ribbon */
    z-index: 1;

    /* Background */
    border: 1rem solid #d1d5db;
	width: 0;
	height:0; 
}

此时图形恢复原样，但是内容溢出；因此如果你想在这个里面显示一些内容，最好将容器设置大一点，这样内容才不会溢出。

有了这个使用border来构建三角形的基础知识，那么在这个ribbon结构中最下面的两个黑色的三角形，不用我解释您也能轻松理解啦。

如果有不理解的地方，可以参考这篇文章，也可以留言讨论学习。

CSS-Layout Ribbon

意见和建议