首页 > 其他分享 >css小三角文字平移加旋转

css小三角文字平移加旋转

时间:2024-05-21 09:00:38浏览次数:22  
标签:平移 40px right solid border 小三角 css

 

 

<view class="sanjiao">
              <view class="slanted-text">饿了么</view>
            </view>

 

 

/* 三角 */
.sanjiao {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid red;
  border-bottom: 40px solid transparent;
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  font-size: 20rpx;
}
/* 倾斜文字 再平移*/
.slanted-text {
  transform: translateX(10px) translateY(5px) rotate(40deg);
  display: inline-block;
  white-space: nowrap;
}

 

标签:平移,40px,right,solid,border,小三角,css
From: https://www.cnblogs.com/lude1994/p/18203220

相关文章

  • CSS选择器
    一、CSS选择器二、CSS选择器实例按照class属性值取出网页信息fromscrapyimportSelectorhtml="""<htmllang="en"><head><metacharset="UTF-8"><title>bobby基本信息</title><scriptsrc="jquery......
  • CSS3随机背景图片切换特效
    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解`CSS3随机背景图片切换特效日期:2018-5-16阿珏css浏览:4572次评论:16条css3的随机背景图片淡入淡出切换特效 演示效果如本篇文章背景所示......
  • 用CSS3绘制iPhone手机
    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解`用CSS3绘制iPhone手机日期:2017-7-3阿珏css浏览:1825次评论:1条先上效果图,先睹为快。(这绝对不是一张图片。恩~这话怎么怪怪的~)......
  • 简单的css3头像旋转与3D旋转效果
    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解`简单的css3头像旋转与3D旋转效果日期:2017-7-10阿珏css浏览:3896次评论:2条经常会在一些网站看到评论区,评论人的头像当鼠标经过会360°旋......
  • scss :export 中导出的变量为空
    1.assets/styles/variables.scss$base-menu-color:#bfcbd9;:export{menuColor:$base-menu-color}2.index.vue<template><div:style="{backgroundColor:variables.menuColor}"></div></template><script>im......
  • CSS的Flexbox布局示例详解
    CSSFlexibleBoxModule(简称Flexbox)是一种现代化的布局模式,用于创建响应式的一维布局(无论是水平还是垂直)。它提供了对项目的对齐、方向、排序、尺寸调整等方面的强大控制。下面是对Flexbox布局的一些关键概念和示例代码:一、关键概念FlexContainer(弹性容器):需要添加display:f......
  • cs01 CSS Syntax
    ACSScomprisesofstylerulesthatareinterpretedbythebrowserandthenappliedtothecorrespondingelementsinyourdocument.Astyleruleismadeofthreeparts−Selector−AselectorisanHTMLtagatwhichastylewillbeapplied.Thiscouldb......
  • CSS Cascading Style Sheet
    cs01CSSSyntaxcs02CSSSelectorscs03CSSInclusioncs04CSSMeasurementUnitscs05CSSPaddingsProperty  REFhttps://www.tutorialspoint.com/css/index.htm-https://www.w3schools.com/css/default.asp ......
  • cs03 CSS Inclusion
    TherearefourwaystoassociatestyleswithyourHTMLdocument.MostcommonlyusedmethodsareinlineCSSandExternalCSS.EmbeddedCSS-The<style>ElementYoucanputyourCSSrulesintoanHTMLdocumentusingthe<style>element.Thista......
  • cs04 CSS Measurement Units
    Valuesandunits,inCSS,aresignificantastheydeterminethesize,proportions,andpositioningofelementsonawebpage.Units,definethemeasurementsystemusedtospecifythevalues.CSSoffersanumberofdifferentunitsforexpressinglengthand......