https://www.zhihu.com/question/316035638/answer/623573494这个符号用在函数映射中，叫做Maplet或者Maplet Arrow，在LaTex中叫做\mapsto 。
我们在网页开发中实现
一个
tips时会有
一个
小
箭头
，实现这种方法的文章网上已经泛滥了，但有时实现这个小
箭头
不止只有单纯的三角它还有描边，今天我们就借那些现有的文章在深入一点来说说如何给tips小
箭头
描边，本章不涉及svg/canvas，没必要因为我讲的是css。
主体样式：
<div class=dui-tips><a>w3cbest我是
一个
tips</a></div>
.dui-tips{
position: relative;
padding: 10px;
text-align
≈≡≠＝≤≥＜＞≮≯∷±＋－×÷／∫∮∝∞∧∨∑∏∪∩∈∵∴⊥‖∠⌒⊙≌∽√
+: plus(positive正的)
-： minus（negative负的）
对于多元多项式情况比较复杂些不强调时按混合项总幂排，若强调某
一个
变量时放在前面>sort(poly,[y,x]),还有特殊的按字典排序
>sort（poly，[x,y],'plex'）
作各种运算时会自动合并同类项，对于多项式只有完全相同的项才会自动合并，若要针对某个变量合并，要用collect命令
>collect(poly,
<div class="slider">
<div class="slide"><img src="https://picsum.photos/id/237/500/300" alt=""></div>
<div class="slide"><img src="https://picsum.photos/id/238/500/300" alt=""></div>
<div class="slide"><img src="https://picsum.photos/id/239/500/300" alt=""></div>
<div class="slide"><img src="https://picsum.photos/id/240/500/300" alt=""></div>
<a class="prev" onclick="prevSlide()">❮</a>
<a class="next" onclick="nextSlide()">❯</a>
CSS 代码：
.slider {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
margin: 0 auto;
.slide {
position: absolute;
width: 500px;
height: 300px;
opacity: 0;
transition: opacity 0.5s ease-in-out;
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
.slide.active {
opacity: 1;
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 30px;
cursor: pointer;
user-select: none;
.prev {
left: 10px;
.next {
right: 10px;
JS 代码：
var slideIndex = 1;
showSlide(slideIndex);
function nextSlide() {
showSlide(slideIndex += 1);
function prevSlide() {
showSlide(slideIndex -= 1);
function showSlide(n) {
var slides = document.getElementsByClassName("slide");
if (n > slides.length) {
slideIndex = 1;
if (n < 1) {
slideIndex = slides.length;
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove("active");
slides[slideIndex-1].classList.add("active");
注意：以上代码仅为示例代码，仅供参考，具体实现需要根据项目实际需求进行修改和完善。
