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 值要调整下,我这边是自己写的,后来给了设计图,直接替换了设计图。

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

相关推荐
嘗_4 分钟前
暑期前端训练day5
前端
uncleTom66610 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥13 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF24 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man26 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬28 分钟前
理解JS事件环(Event Loop)
前端·javascript
盏茶作酒2944 分钟前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐1 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app