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结构中最下面的两个黑色的三角形,不用我解释您也能轻松理解啦。

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

 

版权声明:著作权归作者所有。

thumb_up 0 | star_outline 0 | textsms 0