在项目中偶尔会用到特殊图形，如箭头、手指符号、三角形等，一般情况下可以使用切图、iconfont、伪元素、canvas、svg、webgl等实现， 那么使用非切图的方式如何实现图形 呢？
方案一 元素使用border-radius
编码和效果如下，发现无法100%还原。
<p class="triangle"></p>
.triangle {
width: 30px;
height: 30px;
background-color: blue;
margin: auto;
border-top-left-radius: 20px;
border-top-right-radius: 30px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 0px;
}
方案二 伪元素使用border
编码和效果如下，发现无法100%还原。
<template>
<div>
<br />
<p class="triangle" />
</div>
</template>
<style lang="scss" scoped>
div {
width: 100%;
height: 100%;
}
.triangle{
&:after {
width: 0;
height: 0;
content: '';
border-radius: 20px;
border-left: 20px solid blue;
border-top: 10px solid transparent;
border-right: 20px solid transparent;
border-bottom: 10px solid transparent;
}
}
</style>
方案三 使用 svg
编码和效果如下，可100%还原。
<template>
<div>
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<path
id="svg_6"
d="m297.85049,209.99555c0.62657,117.14184 72.05609,1.42856 71.43256,0.71689c0.62353,0.71167 -72.05913,-117.85872 -71.43256,-0.71689z"
opacity="undefined"
stroke="#fff"
fill="#56aaff"
/>
</g>
</svg>
</div>
</template>
方案四 使用 clip-path
编码和效果如下，可100%还原。
<template>
<div class="triangle"></div>
</template>
<style lang="scss" scoped>
.triangle {
width: 800px;
height: 600px;
background: #56aaff;
clip-path: path(
"m297.85049,209.99555c0.62657,117.14184 72.05609,1.42856 71.43256,0.71689c0.62353,0.71167 -72.05913,-117.85872 -71.43256,-0.71689z"
);
}
</style>
