如何使用 CSS 绘制一个向左的三角形?

2024-06-07

我已经很久没有建造这个向上的三角形了。我怎样才能改变我的 CSS 使角指向左边?

http://jsfiddle.net/3sP8q/ http://jsfiddle.net/3sP8q/

.left-corner {
    width: 0;
    height: 0;
    border-bottom: 15px solid #000;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    position: relative;
}
<div class="left-corner"></div>

具体方法如下:

.left-corner {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}
<div class="left-corner"></div>

Use CSS 技巧 http://css-tricks.com/examples/ShapesOfCSS/,有很大帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 CSS 绘制一个向左的三角形? 的相关文章

  • 使用 CSS 选择器和 BeautifulSoup 获取属性值

    我正在抓取网页Python并使用BeutifulSoup library I have HTML像这样的标记 tr class deals span class hotel name a href www example2 com a sp
  • 为什么 CSS 重置不使用“*”来覆盖所有元素?

    For example the Meyer reset http meyerweb com eric tools css reset has a long list of elements1 which I believe can be r
  • Bootstrap 3 列列排序

    Bootstrap 3 2 1 排序 三列排序问题 尝试在小屏幕上订购三列 如下图所示 In medium screen it should be like above image but ordering is not working i
  • CSS 底部边框悬停“抖动”

    我有一个导航栏 当您将鼠标悬停在导航按钮上时 我想给它一个橙色的底部边框 唯一的问题是 每当您悬停时 边框都会使内容 导航按钮 抖动 这是不应该的 另外 我的导航栏上已经有一个黑色的底部边框 因此无法更改它 HTML div ul li a
  • 有什么解决方案可以删除 Firefox 上的清除按钮 吗?

    我尝试禁用隐藏清除按钮 但没有成功Firefox But on Chrome Edge Safari效果很好 知道为什么吗 有解决办法吗 以下是CSS input type time webkit clear button display
  • JavaScript 和 jQuery 以及句点的使用

    我很困惑在引用类名时何时使用类名之前的句点 在此示例中 为什么 active slide 类的第一次使用事先使用了句点 而其他两个则没有 var main function dropdown toggle click function dr
  • Codemirror光标位置偏移

    我正在使用代码镜像在网页中显示 突出显示和编辑 xml 但我遇到了光标位置偏离插入位置的问题 因此 如果从闪烁光标所在的位置删除字符 则删除之前的字符您期望的那个会被删除 我假设它与我当前页面存在 css 冲突 因为它在我的页面之外运行良好
  • 带有透明背景的css3锯齿状边缘

    我试图在图像上的 div 上用 css3 制作锯齿状边缘 并且我需要它有一个透明的 bg bg 我的意思是锯齿状边缘在哪里 请参阅以下小提琴 http jsfiddle net ovb597yq http jsfiddle net ovb5
  • 在纯 css3 循环中按顺序对元素进行动画处理

    我正在尝试在完整的 css3 动画中按顺序对元素进行动画处理 似乎非常直接的答案是使用动画延迟 但是我想要这个循环 有什么想法如何使动画无限循环吗 我找到了这个fiddle http jsfiddle net cherryflavourpe
  • 在 jQuery Mobile 中设置 Listview
  • 高度
  • 我正在尝试调整大小 li 在我的 jQuery 移动网站 listview 中 似乎无法在 CSS 中找到合适的类来执行此操作 我基本上调整了一些元素的大小 页眉和页脚等 我有五个 li li 按钮垂直堆叠 按钮和页脚下方有间隙 我只想设置
  • 角 2 材料容器固定不工作

    我对 CSS 和 Angular 2 材质有疑问 任何固定定位元素的行为都不像固定在 md sidenav container 内 如果它不在容器内 则它可以正常工作 这是该问题的链接 只需将 md toolbar 复制并粘贴到容器内部 您
  • 使整个网页着色

    How I can take any given webpage and make everything look tinted a certain color Basically if you take google and tint i
  • Javascript显示/隐藏div onclick

    我有一个页面 其中包含三个 div 每个 div 是一个段落 我想使用 javascript 在用户从导航栏中按下每个 div 时仅在页面中显示这是导航栏 https i stack imgur com 1LnsS png WebDev 只
  • 是否可以使用 Chrome 开发者工具审核多个页面?

    我试图找出我的网站中未使用的 CSS 类 然后我发现 Chrome 开发者工具中有一个审核功能 可以标记未使用的 CSS 类 但是 它一次只能执行一页 有没有办法让它审核多个页面 以便我可以找出所有页面中未使用的 CSS 类 我知道有一个
  • 有没有一种方法可以使页面布局在 100% 缩放下完美契合,同时又尊重更大的缩放系数?

    有多种方法可以布局网页 使其适合浏览器视口 DOMwindow 当我说 适合 时 我包括更改所用字体的大小 更改 DIV IMG 和其他渲染元素的宽度和高度 以及允许元素 流畅 移动 目标是使页面在所有显示设备 从小型手机到大桌面屏幕 上看
  • LESS CSS 在媒体查询中设置变量?

    我正在开发一个专门针对 iPad 的网站 为了使我的网站能够在视网膜显示屏 iPad 和旧版本 iPad 上运行 我想在媒体查询中的 LESS CSS 中设置一个变量 例如 media all and max width 768px rat
  • 禁用 iframe 中的滚动

    有没有办法在 iframe 中禁用所有滚动 我有一个 iframe 其中内容超出了 iframe 尺寸 设置scrolling no 只会删除滚动条 但不会禁用滚动 我无法控制 iframe html 的头部 所以我无法设计它的样式 有任何
  • 使 div 的大小与其内部图像的大小相同

    我有一个带有以下代码的div HTML div img src img logo png div CSS div imgContainer width 250px height 250px padding 13px 问题是用户可以编辑图像大
  • 使用带有箭头的 MaterializeCSS 轮播 - 如何使用普通 javascript 进行初始化

    我正在尝试使用 MaterializeCSS 创建带有箭头的轮播 我正在尝试使用这个代码笔 https codepen io Paco Cervantes pen ZLxKpj取得有限的成功 我想使用普通的 javascript 而不是 j
  • Chrome 上的 contenteditable 中未显示编辑光标

    当您打开此页面时 请参阅现场演示 http jsfiddle net gs3p1a6r 3 show 与 Chrome span span CSS myspan border 0 outline 0 JS myspan focus the

随机推荐

  • java中类级锁是如何实现的?

    我知道锁定概念与同步静态和非静态方法分别锁定类和实例 我无法理解的是 类级锁是如何实现的 我的意思是 类只是一个模板 没有物理意义 那么 当我们说类级锁定是通过同步静态方法来实现时 会发生什么呢 该类的所有对象是否都被锁定或被其他进程锁定
  • 更改从 xib 加载的 UITableViewHeaderFooterView 上的背景颜色表示使用 contentView.backgroundColor

    I m 从 xib 文件创建 UITableViewHeaderFooterView https stackoverflow com a 20073742 35690 几乎一切都工作正常 问题是 现在当我尝试更改背景颜色 或者如果我在 xi
  • 使用回退异步加载 jquery 核心

    通过标头中的性能优化和非阻塞脚本 我一直在尝试异步加载 jquery 本身 我遇到了一个jQuery 加载器 http www yterium net jQl an asynchronous jQuery Loader脚本 那个async加
  • 是否可以在 Objective-C 中创建自定义指令?

    Objective C 有如下指令 界面 执行 end 协议 财产 合成 我认为这些东西就像复杂的宏或代码生成器 是否可以创建用于代码生成目的的自定义指令 一种可能的用途是为 CoreData 生成方法 我想不是 因为我从来没有见过任何东西
  • 无法完成 Git Rebase

    我目前正在一个分支上工作 想用 master 来更新它 所以我尝试做一个变基 我正在处理的当前分支 crtdev 我尝试做变基 git checkout crtdev git rebase master used diff mergetoo
  • ios UICollectionView - 设置自动高度

    我正在使用 UICollection 视图创建 3x4 按钮矩阵 iPhone4很好看 高度也比较小 此外 集合视图不会滚动 因为它在可用空间中显示 3x4 矩阵按钮 现在 当我在 iPhone5 上运行相同的应用程序时 我看到底部按钮矩阵
  • 如何使用 jquery 验证这种格式 (yyyy-mm-dd) 的日期?

    我正在尝试验证以下格式的日期 yyyy mm dd 我找到了这个解决方案 但它的格式不符合我的需要 如 mm dd yyyy 这是该解决方案的链接 http jsfiddle net ravi1989 EywSP 848 http jsfi
  • 网守检疫问题与证书

    我们的应用程序已经过代码签名 我们的 Apple 证书是最新的 我们的应用程序的早期版本运行得很好 然而 当用户下载 DMG 时 在某些 Mac 上该应用程序会被隔离 但对于大多数用户而言 情况并非如此 因此 一些用户可以打开该应用程序 而
  • 在 PhoneGap 中启用数字键盘上的 Enter 键

    我们在 Android 3 22 上运行 PhoneGap 2 6 jquery mobile 和backbone 也在其中 我们希望用户在字段中输入值后可以点击回车键来提交表单 该字段是数字输入
  • Delphi 7,加载PNG到TImage

    只是想加载 PNG 尝试使用适用于其他格式的 OleGraphic 来使用我的 LoadPic 但在 PNG 上失败 目标是将图像复制到隐藏位图 然后将其屏蔽并复制到可见的工作图像画布 如果 CopyRect 不这样做 请随意提出其他建议
  • 为什么 Boost.Asio 不支持基于事件的接口?

    我正在尝试理解 Boost Asio 目的是潜在地使用条件变量与 Boost Asio 结合来实现信号系统 我看过其他 StackOverflow 问题boost asio异步等待条件变量 https stackoverflow com q
  • 如何让 ipdb 在调试时显示更多行上下文?

    默认情况下 在 IPython 中调试期间 ipdb http pypi python org pypi ipdb显示代码中当前位置的上方一行和下方一行 有没有简单的方法可以让显示的区域更大一点 我认为它是可配置的 但一直无法找到它 您可以
  • Typescript 项目引用:处理引用项目的第三方依赖项

    我有一个包含 3 个目录的项目client api and shared The shared目录包含 typescript 类型和定义engine我想与之共享的文件夹client and api 此外 shared目录还需要一些第三方依赖
  • R - 对矩阵的每行/列应用具有不同参数值的函数

    我试图将函数应用于矩阵的每一行或每一列 但我需要为每一行传递不同的参数值 我以为我熟悉 lapply mapply 等 但可能还不够 举个简单的例子 gt a lt matrix 1 100 ncol 10 gt a 1 2 3 4 5 6
  • 安装 python 库时出现“'cc' 失败,退出状态 1”错误

    和许多其他人一样 我在安装 python 库 作为 tar 下载 然后解压 时遇到问题 rodolphe mbp python Levenshtein 0 11 2 Rodolphe sudo python setup py install
  • 在 Rspec 中测试 STDOUT 输出

    我正在尝试为这个声明建立一个规范 使用 看跌期权 很容易 print file doesn t exist Create Empty File y n RSpec 3 0 RSpec 3 0添加了一个新的output matcher htt
  • k8s CronJob 在 pod 列表上循环

    我想在特定命名空间中的 pod 上运行循环 但诀窍是在 cronJob 中执行此操作 是否可以内联 kubectl get pods n foo 这里的技巧是在你获得 Pod 列表后 我需要循环并在 15 秒的超时时间内将每个 Pod 删除
  • AngularJS 服务返回未定义

    我有以下服务 app services emailService http sce function http sce return getMessage function messageId callback http get api e
  • 使用列表与代理集

    代理列表和代理集是 NetLogo 中两种不同的数据类型 并且可以使用以下命令进行转换 turtle set and sort 该文档指出 您可以使用列表来表示代理的有序集合 使用集合来表示无序集合 看来可用于列表的匿名过程使得列表比代理集
  • 如何使用 CSS 绘制一个向左的三角形?

    我已经很久没有建造这个向上的三角形了 我怎样才能改变我的 CSS 使角指向左边 http jsfiddle net 3sP8q http jsfiddle net 3sP8q left corner width 0 height 0 bor