程序员经验分享-hwhale

将 css 边框设置为 90 度而不是 45 度角

2024-02-21

我有一个 div，其 border-bottom 和 border-right 属性具有不同的颜色。 因此，它们通过一条线分开，使盒子呈 45 度角。

如何使底部边框更短，以便右边框一直延伸到元素的底部，从而产生 90 度角分隔线？


你可以这样做box-shadow.

Demo: jsFiddle

Output:

CSS:

#borders {
    border-bottom: 20px solid black;  
    box-shadow: 20px 0 0 0 red;
    height: 150px;
    margin: 30px;
    width: 150px;
}

HTML:

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

html

css

将 css 边框设置为 90 度而不是 45 度角 的相关文章

  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red

  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex

  • 删除特定数据表上的所有边框

    我需要使用 PrimeFaces 隐藏一个数据表的所有边框 而不是全部 我尝试了很多事情 但没有人奏效 有谁知道该怎么做 我已将以下样式 单独 应用于ui datatable class border hidden important bo

  • 如何将 HTML 转换为 Markdown？

    我有一个类似 stackoverflow 的网站 有一个文本区域 人们可以在其中写答案 我用这个 PHP 库 http parsedown org 转换降价 我的意思是我使用该函数来转换 italic to i italic i inclu

  • 古老的“字幕”标签的替代品？

    marquee 标签的标准等效项是什么 我正在寻找 HTML C asp NET 或 ASPX jquery java 脚本的解决方案 marquee 标签未包含在标准中 因为它是 视觉 标签 而不是 语义 标签 因此 您想要的任何语言都没

  • 单击导航项锚链接时如何关闭切换菜单

    请看我的FIDDLE http jsfiddle net ayhpp8ax 我有一个带有 响应式 导航菜单 带有指向页面上元素的锚链接 的 1 页网站 当浏览器视口小于特定宽度 在我的情况下为 767px 时 使用此 javascript

  • 多语言标记验证器

    是否有免费的在线多语言标记验证服务可以正确识别和验证多语言标记 我确实找到了totalvalidator和htmlvalidator 但这些是 付费 非基于网络的解决方案 Use http validator w3 org nu http

  • createHTMLNotification() 替换

    我创建了一个 Chrome 扩展程序 其中使用createHTMLNotification 在所有内容之上显示一个窗口 然而 从 Chrome 28 开始 谷歌决定放弃createHTMLNotification 完全 为什么 谷歌 为什么

  • jQuery mobile 中的文本区域高度和宽度？

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML

  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo

  • 在 Angular html 模板中访问常量枚举

    假设我有一个常量枚举 export const enum MyConstEnum Value1 Value1 Value2 Value2 Value3 Value3 现在我想在我的 Angular 模板中使用它 span This has

  • 将 XSL-FO 转换为 HTML

    我有一组用于 PDF 生成的 XSL FO 文档 我还需要将相同的输出数据 PDF 格式 导出为 HTML 文件 此外 我需要 HTML 具有与 PDF 类似的样式 有没有办法使用 C 将 XSL FO 转换为 XHTML NOTE 我知道

  • CSS 继承、别名和其他很酷的东西

    有一天 我随机浏览网页 发现了一些程序 可以让你编写 CSS 别名和其他很酷的东西 我现在不记得了 举个例子 我记得你可以这样做 myclass background color red greenfont 其中 greenfont 在其他

  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没

  • 如何通过单击链接来更改 div 的内容？

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st

  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo

  • 如何停止TinyMCE删除span标签？

    在我的工作中 前一位程序员决定使用公司网站上精彩的TinyMCE 我遇到的数千个问题之一是 如果原文有的话span标签 当我按下退格键删除一行 p仅标签 全部span标签已从文本中删除 这个错误比另一个错误更具体 我可以删除anything

  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div

  • 使用 CSS 的响应式图像

    我发现调整图像大小以使其具有响应能力很棘手 我正在开发一个 php 应用程序来自动将网站转换为响应式版本 我有点被图像困住了 我已经成功地为网站上的每个图像添加了一个包装类 并且可以很好地调整图像的大小 我的问题在于自然小于窗口的图像 例如

  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx

随机推荐

  • 如何在JTextPane中添加图像？

    我想为用户提供复制和粘贴的便利Images in JTextPane 请帮我 有一个简单的方法来添加图像 JTextPane pane new JTextPane pane insertIcon new ImageIcon path to

  • SignalR Client 启动连接时如何设置用户？

    服务器端 public override Task OnConnected var connectionId Context ConnectionId var user Context User Identity Name Context

  • Android TextView 文本未在版本 2.3.3 上的relativelayout 中换行

    我一直在尝试让 TextView 在 Android 2 3 3 上将文本包装到多行 但我无法让它工作 即使是在最基本的级别上 无论我做什么 文本总是会在屏幕边缘被切断 它在 Android 4 上运行得很好 但我也想瞄准 2 3 3 我在

  • 防止 cl.exe 打印编译后的源文件

    我从命令行 VS 2008 使用MS编译器 每当它编译一个源文件时 它就会打印编译后的源文件 有没有办法避免这种无用的打印 无法使用开关抑制该消息 另请参阅这个线程 http social msdn microsoft com Forums

  • jpa 查询不会触发 hibernate envers

    我正在使用 hibernate envers 来审计事件 当我调用 repositoy delete 或repository save 时 它与 Spring Data JPA Repository 一起工作得很好 但是如果我编写一个 jp

  • 离线撤销模式

    我的问题类似于this https stackoverflow com questions 13560140 verifying certificate using crl certificate revocation list in c

  • 为什么人们会考虑使用代理键而不是自然键和 ON UPDATE CASCADE ？

    免责声明 这与其他主题不是同一个问题 使用自然键时我们面临的缺点之一是 如果业务逻辑发生变化并且我们需要更改一个键 则需要将这一更改传播到所有链接表 然而 使用一个关于级联更新 https stackoverflow com questio

  • Powershell 5 类的 Pester 模拟方法

    我在尝试模拟 powershell 5 类方法时遇到问题 在执行测试时 出现错误 CommandNotFoundException 无法找到 Command FunctionToMock 我试图通过模拟 FunctionToMock 来对

  • '__proxy__' 对象在 CreateView 中没有属性 'get'

    所以我认为这不是正确的做事方式 但我正在尝试学习 django 并且我正在尝试一些事情 我正在尝试为我的设置一个外键Formula模型 通过在实例中硬编码maker Models class Cooker models Model name

  • 具有更高种类类型的类的自类型注释

    Given abstract class Databases F 我怎样才能让这个特质发挥作用 Marker trait signalling the database plugin supports StaticRoles trait S

  • 仅 Web API v2 项目的 HttpContext.Current.User null

    我的目标是将 IWA 集成 Windows 身份验证 与 NET Web API 结合使用 我想将该项目保留为 Web API 项目 而不使用 MVC 我在 Visual Studio 2013 Premium 中创建了两个项目 第一个我选

  • 已处理的 RoutedEvent 继续在树中冒泡

    我正在开发一个TreeView基于控制和我的双击事件继续冒泡我的TreeViewItem nodes 目标是拥有TreeViewItem双击时展开或折叠 我有一种样式 将事件处理程序应用于MouseDoubleClick事件给每个TreeV

  • Swing 不显示 unicode 字符

    I ve got some non ascii characters I m trying to display in a Swing JComboBox The characters aren t displaying correctly

  • 通过 Git 部署的计划 Azure WebJob 导致按需作业

    我有一个支持 Git 的 ASP NET WebApp 以及一个关联的 Azure WebJob 当我通过 Visual Studio 部署它时 一切都很好 但这在持续交付环境中有点困难 所以我想通过 Git 发布 Web 应用程序和 We

  • Kafka 流处理器上下文中的周期性 NPE

    使用 kafka streams 0 10 0 0 在转发消息时 我会定期在 StreamTask 中看到空指针异常 它在 10 到 50 的调用之间变化 NPE 发生在这个方法中 public

  • 适用于 Windows 的 Docker 的 Docker 日志（驱动程序 json 文件）位置

    我想找到容器的日志位置 I use 适用于 Windows 的 Docker 桌面 我知道在linux上他们在 var lib docker containers 但它在哪里呢 它是否隐藏在无法访问的虚拟机中的某个位置 Windows 10

  • VueJS 与 HAML/Jade/Pug 类似的模板

    我同时使用 Vue js 和HAML https www npmjs com package haml在我当前的项目中 模板由 HAML 解析 转换为 HTML 然后由 Vue 解析 例如 pagecontent nonscrolling

  • Spring JPA 选择特定列

    我正在使用 Spring JPA 执行所有数据库操作 但是我不知道如何从 Spring JPA 中的表中选择特定列 例如 SELECT projectId projectName FROM projects 您可以使用 Spring Dat

  • 使用nodemailer在node.js中发送邮件

    我正在尝试使用 Nodemailer 在 node js 中发送邮件 但它显示一些错误 例如 Error self signed certificate in certificate chain code ECONNECTION comma

  • 将 css 边框设置为 90 度而不是 45 度角

    我有一个 div 其 border bottom 和 border right 属性具有不同的颜色 因此 它们通过一条线分开 使盒子呈 45 度角 如何使底部边框更短 以便右边框一直延伸到元素的底部 从而产生 90 度角分隔线 你可以这样做

热门标签