<template><div :class="$options.name"><div class="triangle-container1"><!-- 伪类三角形：向右 --><div class="triangle-RM"></div><!-- 伪类三角形：向下 --><div class="triangle-BM"></div></div><div class="triangle-container2"><!--  左上角 --><div class="triangle-LT"></div><!--  右上角 --><div class="triangle-RT"></div><!--  左下角 --><div class="triangle-LB"></div><!--  右下角 --><div class="triangle-RB"></div></div><div class="triangle-container3"><!--  上角 --><div class="triangle-T"></div><!--  下角 --><div class="triangle-B"></div><!--  左角 --><div class="triangle-L"></div><!--  右角 --><div class="triangle-R"></div></div></div>
</template>
<script>
export default {name: `triangle`,
};
</script>
<style lang="scss" scoped>
.triangle {display: flex;& > * {width: 100px;height: 100px;background-color: #00000011;margin: 10px;overflow: hidden;position: relative;}.triangle-RM {position: absolute;margin: auto;right: 0;top: 0;bottom: 0;height: 0;&:after {/* 向右的直角三角形箭头 */content: "";position: absolute;top: 0;right: 0;width: 0;height: 0;border: 5px solid transparent;border-left-color: #f56c6c;}}.triangle-BM {position: absolute;margin: auto;left: 0;right: 0;bottom: 0;width: 0;&:after {/* 向下的直角三角形箭头 */content: "";position: absolute;bottom: 0;right: 0;width: 0;height: 0;border: 5px solid transparent;border-top-color: #f56c6c;}}// 左上角.triangle-LT {position: absolute;left: 0;top: 0;clip-path: polygon(0 0, 100% 0, 0 100%);width: 10px;height: 10px;background-color: #f56c6c;}// 右上角.triangle-RT {position: absolute;right: 0;top: 0;clip-path: polygon(0 0, 100% 0, 100% 100%);width: 10px;height: 10px;background-color: #f56c6c;}// 左下角.triangle-LB {position: absolute;left: 0;bottom: 0;clip-path: polygon(0 0, 0 100%, 100% 100%);width: 10px;height: 10px;background-color: #f56c6c;}// 左下角.triangle-RB {position: absolute;right: 0;bottom: 0;clip-path: polygon(100% 0, 0 100%, 100% 100%);width: 10px;height: 10px;background-color: #f56c6c;}// 上角.triangle-T {position: absolute;margin: auto;left: 0;top: 0;right: 0;clip-path: polygon(0 100%, 50% 0, 100% 100%);width: 10px;height: 10px;background-color: #f56c6c;}// 下角.triangle-B {position: absolute;margin: auto;left: 0;bottom: 0;right: 0;clip-path: polygon(0 0, 50% 100%, 100% 0);width: 10px;height: 10px;background-color: #f56c6c;}// 左角.triangle-L {position: absolute;margin: auto;top: 0;left: 0;bottom: 0;clip-path: polygon(100% 0, 0 50%, 100% 100%);width: 10px;height: 10px;background-color: #f56c6c;}// 右角.triangle-R {position: absolute;margin: auto;top: 0;right: 0;bottom: 0;clip-path: polygon(0 0, 100% 50%, 0 100%);width: 10px;height: 10px;background-color: #f56c6c;}
}
</style>