css 画一个梯形

直接上代码了

复制代码
<div v-if="data.name==='液压支架'">
  <div class="trapezoid"></div>
   <div id="tranFont">设计</div>
 </div>

css 样式

复制代码
#tranFont{
  position: absolute;
  top: 75px;
  right: 20px;
  transform: rotateZ(50deg);
  -ms-transform: rotateZ(50deg);
  -webkit-transform: rotateZ(50deg);
  color: #FFF;
  font-size: 9px;
  text-align: center;
  padding: 3px 0;
}
.trapezoid{
  position: absolute;
  top: 79px;
  right: 10px;
  border-top: 10px solid #ffb236;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transform: rotate(225deg);
  height: 0;
  width: 37px;
}

注意的是 top 值要调整下,我这边是自己写的,后来给了设计图,直接替换了设计图。

最好还是出设计图直接点。

相关推荐
Rubin934 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子5 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598245 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug8 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo8 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢32 分钟前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机37 分钟前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler28140 分钟前
解决setTimeout/setInterval计时不准确问题的方案
前端
sophie旭1 小时前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读
蓝易云1 小时前
Qt框架中connect()方法的ConnectionType参数使用说明 点击改变文章字体大小
linux·前端·后端