css：绘制一角是圆角的三角形

<template><!-- 右上角带三角形的card --><div style="width: 800px;margin: 20px auto;"><a-card class="card"><p>Card content</p><p>Card content</p><p>Card content</p><div class="divRadius"></div><div class="tagText">默认</div></a-card></div></template><script>export default {name: "hello",props: {dataSource: {}},components: {},data() {return {}},created() {},mounted() {},methods: {}}
</script><style scoped>.card {position: relative;border-radius: 20px;}/* border、border-left、border-bottom宽度一样。*/.divRadius {border: 30px solid #55aaff;border-left: 30px solid transparent;  border-bottom: 30px solid transparent; /*跟card的border-radius设置的值一致*/border-top-right-radius: 20px;position: absolute;      width: 0;  right: -1px;top:-1px;cursor: pointer;}.tagText {position: absolute; right: 6px;top:6px;transform:rotate(45deg);font-weight: bold;color: white;}
</style>

效果图：

参考：

怎么用css3写出一角是圆角的三角形_百度知道

css：绘制一角是圆角的三角形相关推荐

使用CSS绘制几何图形（圆形、三角形、扇形、菱形等
在实际开发中,会出现一些小三角,用icon又不方便,于是我使用css绘制,并进行记录 1.在使用伪类时,要加position: absolute;,当我没有加的时候,圆形会变成椭圆形 2.伪类中使用p ...
三角形css_使用css绘制三角形
好看的前端网页大家见到的应该都不少但是很多都是用图片作为背景今天我们就给大家讲讲怎么用css绘制图形 (图形如下) ---------------------------------------- ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
CSS 奇思妙想 | 巧妙的实现带圆角的三角形
但是其中漏掉了一个非常重要的场景,如何使用纯 CSS 实现带圆角的三角形呢?,像是这样: A triangle with rounded 本文将介绍几种实现带圆角的三角形的实现方式. 法一. 全兼容的 ...
css绘制常见的一些图形(线条、箭头、三角形、矩形、圆、椭圆、平行四边形、菱形、梯形)
css常见的图形绘制线段的绘制直线(实线) 直线(虚线) 箭头的绘制单箭头双箭头三角形的绘制直角三角形三角形矩形圆椭圆梯形的实现梯形直角梯形圆角梯形菱形的实现通过正方形 ...
css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
[css] 用CSS绘制一个三角形
[css] 用CSS绘制一个三角形 .triangle{width: 0;border-bottom: 35px solid lightgreen;border-left: 35px solid tr ...

css：绘制一角是圆角的三角形

css：绘制一角是圆角的三角形相关推荐

最新文章

热门文章