pure CSS3 & triangle icon

css3 & triangle

pure CSS3 实现三角形icon的方法

https://www.cnblogs.com/xgqfrms/p/5947745.html

实现方法

1. border: color+transparent

.crop-card-fire{position: absolute;top: 0;right: 0;width: 0;height: 0;border-width: 0.32rem;border-style: solid;border-color: rgba(255,148,62,1) rgba(255,148,62,1) transparent transparent;cursor: pointer;
}

1. transform : rotate() /rotateZ()

1. ? 使用 实体字符”◆“实现三角形效果

4 .emoji

full demo

vue Crop Card module

<template><div class="crop-card-container"><divv-if="isShowHotFire"class="crop-card-fire"><span class="crop-card-text"></span></div><div class="crop-card-logo"><img:src="logo"alt=""class="crop-card-logo-img"/></div><div class="crop-card-right"><span class="crop-card-right-title"><span class="crop-card-right-title-key">钉钉</span><span class="crop-card-right-title-value">(中国) 信息技术有限公司</span></span><p class="crop-card-right-content"><span class="crop-card-right-content-key">法定代表人</span><span class="crop-card-right-content-key">注册资本</span></p><p class="crop-card-right-content"><span class="crop-card-right-content-value">马云</span><span class="crop-card-right-content-value">330886万美元</span></p></div><div class="crop-card-line"></div><div class="crop-card-footer"><span class="crop-card-footer-key">品牌</span><span class="crop-card-footer-value">钉钉</span></div></div>
</template><style lang="css">
html{--color: #f0f;font-family:PingFangSC-Regular;font-weight:400;
}
.crop-card-container{position: relative;display: flex;flex-flow: row wrap;justify-content: flex-start;align-items: stretch;align-content: stretch;box-sizing: border-box;margin: 0;padding: 0;width: calc(100vw);height: calc(2.9rem);border-bottom: 0.2rem solid rgba(249,248,253,1);
}
.crop-card-logo{order: 0;flex: 0 1 auto;margin: 0.32rem;margin-right: 0.2rem;height: 1.9rem;height: calc(1.9rem - 0.64rem);
}
.crop-card-logo-img{width: 0.64rem;height: 0.64rem;
}
.crop-card-right{order: 1;flex: 0 1 auto;line-height: 0.28rem;height: 0.28rem;font-size: 0.34rem;width: 6.34rem;height: calc(1.9rem - 0.42rem);margin-top: 0.42rem;
}
.crop-card-right-title{width: 6.34rem;
}
.crop-card-right-title-key{color:rgba(25,31,37,1);font-weight: 600;
}
.crop-card-right-title-value{color:rgba(25,31,37, 0.5);
}
.crop-card-right-content{line-height: 0.40rem;height: 0.40rem;font-size: 0.28rem;width: 6.34rem;margin-top: 0.1rem;margin-bottom: 0.1rem;
}
.crop-card-right-content-key{color:rgba(25,31,37,0.4);width: 2.86rem;min-width: 2.86rem;display: inline-block;
}
.crop-card-right-content-value{color:rgba(25,31,37,1);width: 2.86rem;min-width: 2.86rem;display: inline-block;font-weight: 600;
}
.crop-card-line {order: 3;flex: 0 1 auto;width: 7.5rem;height: 2px;background:rgba(25,31,37,0.08);margin: 0;padding: 0;
}
.crop-card-footer{order: 4;flex: 0 1 auto;height: 0.8rem;
}
.crop-card-footer-key{font-size: 0.24rem;line-height: 0.34rem;height: 0.34rem;width: 0.76rem;min-width: 0.76rem;color:rgba(25,31,37,0.4);display: inline-block;margin: 0.24rem 0 0.22rem 0.32rem;
}
.crop-card-footer-value{font-size: 0.24rem;line-height: 0.34rem;height: 0.34rem;min-width: 0.5rem;font-weight: 600;color:rgba(25,31,37,1);
}
.crop-card-fire{position: absolute;top: 0;right: 0;width: 0;height: 0;border-width: 0.32rem;border-style: solid;border-color: rgba(255,148,62,1) rgba(255,148,62,1) transparent transparent;cursor: pointer;
}
.crop-card-text{display: inline-block;transform: translateX(0.03rem) translateY(-0.25rem);
}
.crop-card-text::after{content: "?";display: block;color: #fff;background: transparent;
}</style>