请问这个角标如何弄出来的

如图所示的那个红框里的角标如何弄的

郑小北 2018-04-11

源自：项目：网页布局案例 2-9 作业题

收起

2回答

好帮手慕查理 2018-11-09 10:14:45

您好，可以看一下border的表现形式 ,给一个元素边框设置如下:

观察如下 ,border表现为梯形

当宽高不断减少时 , border会越趋向于三角形 , 如下

当宽高为零时,border变成了三角 , 如下

可以根据这个案例理解三角形的实现哦~ 祝学习愉快 !

收起回答

guly 2018-04-12 09:57:20

你好，角标识给图片添加的before 和after属性，

参考代码如下：

html代码：

<div class="aboutimg arrow">
   <img src="images/b1.jpg">
</div>

css:

.arrow:before {
   content: '';
   position: absolute;
   width: 0;
   height: 0;
   right: 0px;
   border-top: 15px solid rgba(0, 0, 0, 0);
   border-left: 25px solid #07CBC9;
   border-bottom: 15px solid rgba(0, 0, 0, 0);
   top: 180px;
   transform: rotate(180deg);
}

html代码：

<div class="aboutimg arrow2">
   <img src="images/b3.jpg">
</div>

css代码：

.arrow2:after {
   content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
    border-top: 15px solid rgba(0, 0, 0, 0);
    border-left: 25px solid #07cbc9;
    border-bottom: 15px solid rgba(0, 0, 0, 0);
    top: 180px;
}

如果解决您的问题请采纳，祝学习愉快！

收起回答

qq_旧安_0 #1

老师，请问您的三角形是怎么实现的，看不懂您的代码啊

2018-11-08 18:10:51
好帮手慕查理回复 qq_旧安_0 #2

您好，三角形的实现你可以参考上面的代码，代码具体哪看不懂，可以详细提出，以便帮助您理解。或者也可以按照自己的想法去尝试是否能够实现三角形。祝学习愉快！

2018-11-08 18:59:44
qq_旧安_0 回复好帮手慕查理 #3

就是对于一个空元素为什么加一个上下左边框就能变成一个三角形啊，搞不明白原理

2018-11-08 19:12:52