css制作红丝带 |css 媒体查询 手机

.ribbon {
width: 0; 
height: 0; 
border-top: 50px solid red;
border-right: 50px solid transparent;
position: relative;
}
.ribbon:before {
content: ""; 
position: absolute;
top: -10px; 
left: -10px; 
border-right: 60px solid transparent; 
border-bottom: 60px solid red;
}
.ribbon:after {
content: ""; 
position: absolute;
top: 0; 
right: -50px; 
border-top: 50px solid red; 
border-left: 50px solid transparent;
}

上述代码中，大家使用了border属性来制作三角形，使用position属性来确定三角形的位置。具体过程如下：

1. 首先，大家创建一个宽度为 0，高度为 0 的元素，记为 .ribbon 。

2. 接着，在 .ribbon 中使用border-top和border-right属性来制作一个三角形，该三角形的颜色为红色。

3. 完成第 2 步后，大家在 .ribbon 中添加一个:before伪元素，该伪元素的内容为空字符串。通过设置position属性来确定伪元素的位置，使其位于 .ribbon 左上方。

4. 然后，大家使用border-right和border-bottom属性来制作一个三角形，大小与 .ribbon 中的三角形相同，颜色为红色。

5. 在最后一步中，大家在 .ribbon 中添加一个:after伪元素，内容为空字符串。通过设置position属性来确定伪元素的位置，使其位于 .ribbon 右侧。

通过以上步骤，大家就完成了红丝带的制作。需要注意的是，大家使用了position属性来定位元素，因此在实际使用中需要根据实际情况进行调整。