css实现角标

最新推荐文章于 2024-05-22 11:05:55 发布
最新推荐文章于 2024-05-22 11:05:55 发布
阅读量743 收藏 2
点赞数 2
分类专栏： 前端 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013921288/article/details/133877628
版权

左上角一个斜着的类似丝带的元素，里面可以加文字，文字和丝带一样是斜着的效果

先看效果

贴代码

<h1>Corner ribbons for cards</h1>
<div class='card-wrap'>
  <div class='card'>
    <div class='set-image'><p>Straight fold</p></div>
    <div class='set-headline'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='ribbon-wrapper-1'>
      <div class='ribbon-1'>Ribbon</div>
    </div>
  </div>
  <div class='card'>
    <div class='set-image'><p>Angled fold - more realistic</p></div>
    <div class='set-headline'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='ribbon-wrapper-2'>
      <div class='ribbon-2'>Ribbon</div>
    </div>
  </div>
  <div class='card'>
    <div class='set-image'><p>Straight fold on left</p></div>
    <div class='set-headline'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='ribbon-wrapper-3'>
      <div class='ribbon-3'>Ribbon</div>
    </div>
  </div>
  <div class='card'>
    <div class='set-image'><p>Gradient - from top to bottom. Angled fold and text shadow</p></div>
    <div class='set-headline'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='ribbon-wrapper-4'>
      <div class='ribbon-4'>Ribbon</div>
    </div>
  </div>
  <div class='card'>
    <div class='set-image'><p>Gradient - from centre radial. Angled fold and text shadow</p></div>
    <div class='set-headline'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='ribbon-wrapper-5'>
      <div class='ribbon-5'>Ribbon</div>
    </div>
  </div>
  <div class='card'>
    <div class='set-image'><p>Gradient - from centre linear. Angled fold and text shadow</p></div>
    <div class='set-headline'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='ribbon-wrapper-6'>
      <div class='ribbon-6'>Ribbon</div>
    </div>
  </div>
  <div class='card'>
    <div class='set-image'><p>Solid line on ribbon</p></div>
    <div class='set-headline'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='ribbon-wrapper-7'>
      <div class='ribbon-7'>Ribbon</div>
    </div>
  </div>
  <div class='card'>
    <div class='set-image'><p>Dotted line on ribbon</p></div>
    <div class='set-headline'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='ribbon-wrapper-8'>
      <div class='ribbon-8'>Ribbon</div>
    </div>
  </div>
  <div class='card'>
    <div class='set-image'><p>Full works - alt colour</p></div>
    <div class='set-headline'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='set-text'></div>
    <div class='ribbon-wrapper-9'>
      <div class='ribbon-9'>Ribbon</div>
    </div>
  </div>
</div>

html {
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a9aead), to(#c5cdcf));
  background: -webkit-linear-gradient(top, #c5cdcf, #a9aead);
  background: -moz-linear-gradient(top, #c5cdcf, #a9aead);
  min-height: 100%; }

h1 {
  font: bold 35px Sans-Serif;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }

.card-wrap {
  text-align: center; }

.card {
  width: 400px;
  height: 500px;
  position: relative;
  background: #fff;
  overflow: visible;
  margin: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  display: inline-block; }

.set-image {
  width: 100%;
  height: 50%;
  background: #eee;
  overflow: hidden;
  font: bold 20px Sans-Serif;
  text-transform: uppercase;
  display: table; }

.set-image p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  line-height: 25px;
  color: #d2d2d2; }

.set-headline {
  width: 65%;
  height: 10%;
  background: #eee;
  margin: 20px; }

.set-text {
  width: 90%;
  height: 12px;
  background: #eee;
  margin: 12px 20px; }

.ribbon-wrapper-1 {
  width: 106px;
  height: 108px;
  overflow: hidden;
  position: absolute;
  top: -6px;
  right: -6px; }

.ribbon-1 {
  font: bold 15px Sans-Serif;
  line-height: 18px;
  color: #333;
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -11px;
  top: 26px;
  width: 150px;
  background-color: #6daaab;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px; }

.ribbon-1:before, .ribbon-1:after {
  content: "";
  border-top: 4px solid #4e7c7d;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  bottom: -4px; }

.ribbon-1:before {
  left: 0; }

.ribbon-1:after {
  right: 0; }

.ribbon-wrapper-2 {
  width: 108px;
  height: 108px;
  overflow: hidden;
  position: absolute;
  top: -6px;
  right: -6px; }

.ribbon-2 {
  font: bold 15px Sans-Serif;
  line-height: 18px;
  color: #333;
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -4px;
  top: 26px;
  width: 150px;
  background-color: #6daaab;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
  box-shadow: -3px 5px 6px -5px rgba(0, 0, 0, 0.5); }

.ribbon-2:before, .ribbon-2:after {
  content: "";
  border-top: 4px solid #4e7c7d;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  bottom: -4px; }

.ribbon-2:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
  border-left: 4px solid #4e7c7d;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-top: 4px solid #4e7c7d; }

.ribbon-2:after {
  content: "";
  position: absolute;
  right: 7px;
  top: 100%;
  z-index: -1;
  border-left: 4px solid transparent;
  border-right: 4px solid #4e7c7d;
  border-bottom: 4px solid transparent;
  border-top: 4px solid #4e7c7d; }

.ribbon-wrapper-3 {
  width: 106px;
  height: 108px;
  overflow: hidden;
  position: absolute;
  top: -6px;
  left: -6px; }

.ribbon-3 {
  font: bold 15px Sans-Serif;
  line-height: 18px;
  color: #333;
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  position: relative;
  padding: 7px 0;
  left: -33px;
  top: 26px;
  width: 150px;
  background-color: #6daaab;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px; }

.ribbon-3:before, .ribbon-3:after {
  content: "";
  border-top: 4px solid #4e7c7d;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  bottom: -4px; }

.ribbon-3:before {
  left: 0; }

.ribbon-3:after {
  right: 0; }

.ribbon-wrapper-4 {
  width: 108px;
  height: 108px;
  overflow: hidden;
  position: absolute;
  top: -6px;
  right: -6px; }

.ribbon-4 {
  font: bold 15px Sans-Serif;
  line-height: 18px;
  color: #333;
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -4px;
  top: 26px;
  width: 150px;
  background-color: #6daaab;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
  background-image: linear-gradient(#6daaab, #4e7c7d);
  box-shadow: -3px 5px 6px -5px rgba(0, 0, 0, 0.5);
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); }

.ribbon-4:before, .ribbon-4:after {
  content: "";
  border-top: 4px solid #4e7c7d;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  bottom: -4px; }

.ribbon-4:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
  border-left: 4px solid #4e7c7d;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-top: 4px solid #4e7c7d; }

.ribbon-4:after {
  content: "";
  position: absolute;
  right: 7px;
  top: 100%;
  z-index: -1;
  border-left: 4px solid transparent;
  border-right: 4px solid #4e7c7d;
  border-bottom: 4px solid transparent;
  border-top: 4px solid #4e7c7d; }

.ribbon-wrapper-5 {
  width: 108px;
  height: 108px;
  overflow: hidden;
  position: absolute;
  top: -6px;
  right: -6px; }

.ribbon-5 {
  font: bold 15px Sans-Serif;
  line-height: 18px;
  color: #333;
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -4px;
  top: 26px;
  width: 150px;
  background-color: #6daaab;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
  background-image: radial-gradient(circle farthest-side, #6daaab, #4e7c7d);
  box-shadow: -3px 5px 6px -5px rgba(0, 0, 0, 0.5);
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); }

.ribbon-5:before, .ribbon-5:after {
  content: "";
  border-top: 4px solid #4e7c7d;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  bottom: -4px; }

.ribbon-5:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
  border-left: 4px solid #4e7c7d;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-top: 4px solid #4e7c7d; }

.ribbon-5:after {
  content: "";
  position: absolute;
  right: 7px;
  top: 100%;
  z-index: -1;
  border-left: 4px solid transparent;
  border-right: 4px solid #4e7c7d;
  border-bottom: 4px solid transparent;
  border-top: 4px solid #4e7c7d; }

.ribbon-wrapper-6 {
  width: 108px;
  height: 108px;
  overflow: hidden;
  position: absolute;
  top: -6px;
  right: -6px; }

.ribbon-6 {
  font: bold 15px Sans-Serif;
  line-height: 18px;
  color: #333;
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -4px;
  top: 26px;
  width: 150px;
  background-color: #6daaab;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
  background-image: linear-gradient(#4e7c7d -50%, #6daaab 50%, #6daaab 0%, #4e7c7d 150%);
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  box-shadow: -3px 5px 6px -5px rgba(0, 0, 0, 0.5); }

.ribbon-6:before, .ribbon-6:after {
  content: "";
  border-top: 4px solid #4e7c7d;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  bottom: -4px; }

.ribbon-6:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
  border-left: 4px solid #4e7c7d;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-top: 4px solid #4e7c7d; }

.ribbon-6:after {
  content: "";
  position: absolute;
  right: 7px;
  top: 100%;
  z-index: -1;
  border-left: 4px solid transparent;
  border-right: 4px solid #4e7c7d;
  border-bottom: 4px solid transparent;
  border-top: 4px solid #4e7c7d; }

.ribbon-wrapper-7 {
  width: 108px;
  height: 108px;
  overflow: hidden;
  position: absolute;
  top: -6px;
  right: -6px; }

.ribbon-7 {
  font: bold 15px Sans-Serif;
  line-height: 18px;
  color: #333;
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -4px;
  top: 26px;
  width: 150px;
  background-color: #6daaab;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
  box-shadow: -3px 5px 6px -5px rgba(0, 0, 0, 0.5);
  outline: 1px solid #fff;
  outline-offset: -4px; }

.ribbon-7:before, .ribbon-7:after {
  content: "";
  border-top: 4px solid #4e7c7d;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  bottom: -4px; }

.ribbon-7:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
  border-left: 4px solid #4e7c7d;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-top: 4px solid #4e7c7d; }

.ribbon-7:after {
  content: "";
  position: absolute;
  right: 7px;
  top: 100%;
  z-index: -1;
  border-left: 4px solid transparent;
  border-right: 4px solid #4e7c7d;
  border-bottom: 4px solid transparent;
  border-top: 4px solid #4e7c7d; }

.ribbon-wrapper-8 {
  width: 108px;
  height: 108px;
  overflow: hidden;
  position: absolute;
  top: -6px;
  right: -6px; }

.ribbon-8 {
  font: bold 15px Sans-Serif;
  line-height: 18px;
  color: #333;
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -4px;
  top: 26px;
  width: 150px;
  background-color: #6daaab;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
  box-shadow: -3px 5px 6px -5px rgba(0, 0, 0, 0.5);
  outline: 1px dashed #fff;
  outline-offset: -4px; }

.ribbon-8:before, .ribbon-8:after {
  content: "";
  border-top: 4px solid #4e7c7d;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  bottom: -4px; }

.ribbon-8:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
  border-left: 4px solid #4e7c7d;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-top: 4px solid #4e7c7d; }

.ribbon-8:after {
  content: "";
  position: absolute;
  right: 7px;
  top: 100%;
  z-index: -1;
  border-left: 4px solid transparent;
  border-right: 4px solid #4e7c7d;
  border-bottom: 4px solid transparent;
  border-top: 4px solid #4e7c7d; }

.ribbon-wrapper-9 {
  width: 108px;
  height: 108px;
  overflow: hidden;
  position: absolute;
  top: -6px;
  right: -6px; }

.ribbon-9 {
  font: bold 15px Sans-Serif;
  line-height: 18px;
  color: #e9ea7b;
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -4px;
  top: 26px;
  width: 150px;
  background-color: #6daaab;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
  box-shadow: -3px 5px 6px -5px rgba(0, 0, 0, 0.5);
  outline: 1px dotted #E5E82C;
  outline-offset: -4px;
  background-image: radial-gradient(circle farthest-side, #FF1C1A, #BF0B00);
  text-shadow: 2px 1px 0px rgba(0, 0, 0, 0.2); }

.ribbon-9:before, .ribbon-9:after {
  content: "";
  border-top: 4px solid #BF0B00;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  bottom: -4px; }

.ribbon-9:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
  border-left: 4px solid #BF0B00;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-top: 4px solid #BF0B00; }

.ribbon-9:after {
  content: "";
  position: absolute;
  right: 7px;
  top: 100%;
  z-index: -1;
  border-left: 4px solid transparent;
  border-right: 4px solid #BF0B00;
  border-bottom: 4px solid transparent;
  border-top: 4px solid #BF0B00; }

/*# sourceMappingURL=corner-ribbons.css.map */

总结

  • css效果在ribbon-wrapper-1和ribbon-1的类中，其他方向角标类似
  • 核心代码如下：
.ribbon-wrapper-1 {
  width: 106px;
  height: 108px;
  overflow: hidden;
  position: absolute;
  top: -6px;
  right: -6px; }

.ribbon-1 {
  font: bold 15px Sans-Serif;
  line-height: 18px;
  color: #333;
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -11px;
  top: 26px;
  width: 150px;
  background-color: #6daaab;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px; }

.ribbon-1:before, .ribbon-1:after {
  content: "";
  border-top: 4px solid #4e7c7d;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  bottom: -4px; }

.ribbon-1:before {
  left: 0; }

.ribbon-1:after {
  right: 0; }

运行网站 css角标

绿涩夜行者
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用CSS给图片加上角标记
南京小龙虾的博客
04-25 2894
实现后的效果，图片左上角有了标记信息 主要是通过定位和伪类实现 左上角代码 <html> <div class="wrap"> <img width="200" height="200" src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></img> <!-- 标记信息 --> <p class="mark"> .
纯css半圆角tab标签切换代码
06-10
纯CSS实现的Tab标签切换可以提供更加高效、简洁的交互体验，而无需依赖JavaScript等编程语言。本项目名为“纯css半圆角tab标签切换代码”，它包含了六个HTML文件，每个文件代表一种不同的Tab状态或布局，用于实现...
div+css实现的小三角tip小提示(原理及代码)
09-25
小三角tip小提示想必大家并不陌生吧，只为提高用户体验而生，下面有个不错的示例，并给出详细的实现原理，感兴趣的朋友可以参考下
css之右上角带弧形的三角形标签文字45度倾斜显示
qq_43777572的博客
10-14 1851
css之右上角带弧形的三角形标签文字45度倾斜显示
vue3 使用css实现一个弧形选中角标样式
最新发布
@必意玲
05-22 1418
在前端开发中，ui同学经常会设计这样的样式，用于区分选中的状态下面抽空简单些了一下，记录下，后面直接复制用。
前端css3实现角标【二维式与立体式角标实现】
在写作的路上持续输出。
06-04 1345
前端css3实现角标【二维式与立体式角标实现】一🔮
css三角加文字的实现方法
qq_45797421的博客
03-07 525
【代码】css三角加文字的实现方法。
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1379
Document
css写角标,css实现角标(示例代码)
weixin_39901571的博客
08-03 919
效果图：简单方式可以使用背景图片，但这里我使用的css来实现，最笨的方式是使用矩形div然后旋转遮挡就可以，角标实现换样式.checked-item {position: relative;padding : 7px 10px;border : 1px solid #ebebeb;text-align : center;color ...
【CSS】角标（伪元素）
weixin_39415598的博客
01-28 1524
微信订阅号：Rabbit_svip 利用伪元素（ ::before 和 ::after ）制作，这样可以不影响主元素，也不用依赖其他html元素。 利用border的特性制作角标。 border属性还有很多玩法： 【CSS】多重边框（box-shadow、outline） 【CSS】画三角形（border） 【CSS】带边框的三角形（position） 本节效果 ...
css实现上下左右对勾选中状态角标
weixin_45904557的博客
05-06 448
css实现上下左右对勾选中状态角标。
纯DIV+CSS实现圆角代码
09-25
描述中提到“不建议使用”，原因在于纯CSS实现圆角的方式可能涉及到复杂的嵌套结构和多层元素，这会增加页面的复杂度，影响性能，并且在旧版本的浏览器中可能无法正常工作。相比之下，使用CSS3的`border-radius`属性...
CSS实现标签效果的示例代码
12-09
本示例将详细介绍如何使用CSS实现这样的标签效果，尤其适用于在图片右上角添加标签。 首先，我们了解实现这一效果的基本思路： 1. 创建两个`div`元素，一个作为父容器，另一个作为标签。设置它们的宽度和高度，并...
纯CSS实现标签导航制作
10-30
纯CSS实现标签导航制作 在本文中，我们将学习如何使用纯CSS实现标签导航制作，不需要使用JavaScript或背景图片。下面是相关知识点的总结： 1. CSS Reset：在CSS中，我们需要重置浏览器的默认样式，以确保我们的...
使用CSS3实现圆角,阴影,透明
09-25
在本文中，我们将深入探讨如何使用CSS3来实现圆角、阴影和透明效果，这些都是现代网页设计中不可或缺的元素。 1. **圆角** CSS3通过`border-radius`属性引入了创建圆角的能力，极大地简化了以前需要借助图片或复杂...
css伪元素实现选中卡片的角标
FJ101113的博客
11-22 790
用css伪元素实现选中卡片的角标
element-vue tabs标签页使用，前后两个三角标
qq_43610925的博客
09-08 1556
使用tabs做的组件，点击事件，before-leave事件，v-model更换activeName等。此组件是一个绝对定位，相当于漂浮在父组件所有东西的上边，我这里做的是放在“右侧中间位置”背景色以及位置在父组件的样式中设置的，
VUE图片添加角标，图片右上角或左上角添加标识
weixin_45710811的博客
07-27 6258
vue图片添加角标，图片左上角或右上角添加标识
css3 斜角标签
hannaqq的专栏
08-18 5301
.label{             display: block;             position:relative;             width: 50%;             height: 2em;             background-color: #333333;             color: #ffffff;           
css 有点圆角三角形角标
08-17
CSS可以用border-radius属性来创建圆角，但是无法直接创建圆角三角形。不过，可以通过一些技巧和变通方法来实现这个效果。 一种方法是使用伪元素::before或::after来创建一个等腰三角形，然后通过设置边框和圆角来实现圆角三角形的效果。例如，可以给三角形的边框设置圆角属性，如border-radius: 50%。这样就可以创建一个圆角的三角形角标。 另一种方法是使用CSS的clip-path属性，通过定义一个自定义的路径来裁剪元素，从而实现圆角三角形的效果。可以使用polygon()函数或inset()函数来创建路径，然后指定圆角的半径。 需要注意的是，不同浏览器对于border-radius属性和clip-path属性的支持可能有所不同，有些浏览器可能需要使用相应的浏览器前缀来兼容。 总结起来，使用border-radius属性和伪元素::before或::after，或者使用clip-path属性，可以实现CSS中的圆角三角形角标。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [css-下拉菜单](https://download.csdn.net/download/qq_36091012/10894221)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [css圆角三角形3个圆角_CSS圆角](https://blog.csdn.net/culuo8053/article/details/107910747)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值