在CSS3中制作一个有一侧的平行四边形

2023-12-27

我用 CSS3 制作了一个平行四边形。有了这个代码:

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
}

现在我有了左右斜角。但我只想要右边的斜角。我怎样才能做到这一点?

Thanks


UPDATE:

这是一个示例和结果代码:jsFiddle http://jsfiddle.net/QC4EK/.

<style type="text/css">
#trapezoid {
    height: 0;
    width: 100px;
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
</style>
<div id="trapezoid"></div>

这将创建一个梯形。

Or this:

<style type="text/css">
#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
}
</style>
<div id="parallelogram"></div>

这将创建一个平行四边形

这是一篇关于仅使用 CSS 和单个 HTML 元素创建各种形状的文章。这是创建从三角形到星形的各种形状的非常有趣的方法。
CSS 的形状 http://css-tricks.com/examples/ShapesOfCSS/

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

在CSS3中制作一个有一侧的平行四边形 的相关文章

  • 如何在数据表中colspan rowspan?

    I am trying to use colspan and rowspan attributes with jQuery Datatables where a product sku can span 2 rows and a week
  • 如何为 HTML 元素创建鼠标拖动滑块?

    我发现的许多滑块插件要么仅单击以查看下一个图像 要么如果它们确实具有鼠标拖动或触摸拖动功能 则仅允许图像 有谁知道为任何 html 元素编写鼠标拖动滑块的插件或可能的方法 我专门使用 SVG 但将来如果能在 div 元素之间滑动就更好了 H
  • CSS:仅显示字符串的前两个字母

    是否可以使用纯 CSS 仅显示字符串的前两个字母 到目前为止我已经尝试过 没有成功 first letter 仅针对第一个字母 无论如何对我不起作用 nth of everything 需要额外的 javascript 文本溢出 省略号 正
  • 当共享相同的行和列时,将网格项设置为不重叠

    现在 当两个网格项共享相同的行和列时 它们会相互重叠 div class some grid container div Item 1 div div Item 2 div div 我如何让它们不重叠 当共享相同的行和列时 其行为可能类似于
  • 如何消除 HTML 内容周围的边距?

    以下 HTML 显示正常 div style width 100px height 100px background red div Hello div div
  • 获取 FileReader() 的结果对象

    有什么方法可以在不通过函数的情况下获取 FileReader 的结果对象 我在下面制作了示例代码 HTML br br br div div JS var code lorem ipsum input type file change fu
  • Django:按钮链接

    我是一名 Django 新手用户 尝试创建一个按钮 单击该按钮会链接到我网站中的另一个页面 我尝试了一些不同的例子 但似乎没有一个对我有用 举个例子 为什么这不起作用
  • socket.io 的良好初学者教程? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 有角度的动态背景图片

    在 html 模板中 我有这种带有动态图像的样式 div style background none width 200px height 150px div 它适用于网络浏览器和 Android 浏览器 但是 使用 style 的动态背景
  • 删除子元素上的 CSS 过滤器

    我的 CSS 代码有问题 正如您所看到的 我在 li 元素上有过滤器 但它覆盖了其他元素 我需要使其他两个元素没有过滤器 有没有可能这样做 main width 300px height 300px background color blu
  • 为什么 IE8 在我的图像锚标记上添加底部边框?

    我知道 这很可悲 但今天早上 IT 刚刚在我的机器上安装了 IE8 我立刻遇到了一个明显的问题 尽管我知道答案就在我面前 但我已经把它搞砸了太久了 首先 这是网站 www mchenry edu http www mchenry edu 在
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 不可勾选的单选按钮与专有的复选框

    从 UI 角度来看 是拥有一组具有取消选中功能的单选按钮更好 还是拥有一组独占的复选框 意味着一次只能选中一个 更好 Update 我没想到对此会有如此负面的反应 如果我给出一个更接近其使用方式的示例 也许会有所帮助 我有一个充满数据绑定内
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常

随机推荐

  • 命令行解析器缺少子命令和分组?

    我知道这个问题在我寻找答案时已经在这里和其他地方被问过很多次了 然而 它仍然让我困惑为什么命令行解析器库不提供这种常见的使用场景 其中我有一组子命令 每个子命令都有自己的一组必需和可选参数 类似的构造可以在 git svn 中找到 尽管在他
  • 如何在同一个数据库中启动多个应用程序?

    我必须在本地 管理员和客户端 中使用流星应用程序 应用程序运行在不同的端口上3000 and 3003 我想使用两个应用程序应该使用相同的数据库 export MONGO URL mobgodb 127 0 0 1 3001 meteor会
  • 与mysql的累计和

    我有以下查询 set cumulativeSum 0 select cumulativeSum cumulativeSum count distinct ce URL ce IP as uniqueClicks cast ce dt as
  • 使用NextJS Link,如何在客户端传递对象?

    我正在使用一个 Link 组件 并且想要将 JavaScript 对象传递到我要链接到的新页面 看来我可以传递基元 但不能传递对象 也就是说 我想做下面这样的事情 但我得到一个与 sessionData 关联的空字符串 session id
  • 将 div 翻译为里程表

    我一直在尝试使用 React 和 vanilla css 创建一个类似里程表的动画 到目前为止 它正在工作 当数字增加时 translationY向上就像实际的里程表一样 我目前的问题是 当它从 9 变为 0 时 translationY发
  • 编译器警告范围内没有原型定义的函数?

    问题受到评论线程的启发这个答案 https stackoverflow com questions 50399128 functions in c headers 50399252 50399252 众所周知 从 C99 开始 调用未声明的
  • 给定两个时间戳,如何返回“业务分钟”的增量

    为此寻找一个干净的函数 最好是在 Pandas Numpy 中 我目前正在使用 Pandas 的 CustomBusinessHour 和 TimeDelta 函数构建一些混乱的东西 但我认为必须有更好的方法 如果 Pandas 有 Cus
  • Spark中使用Hive数据库

    我是 Spark 新手 尝试使用 HortonWorks Sandbox 在 tpcds 基准表上运行一些查询 http www tpc org tpcds http www tpc org tpcds 在沙箱上通过 shell 或 hiv
  • 为什么 ASP.NET Core 中的线程 ID 会发生变化?

    我使用 Thread 来存储区域设置并将其传递到各层 在我的中间件中 我在当前线程中设置选定的区域设置 如下所示 Thread SetData Thread GetNamedDataSlot SelectedLocale selectedL
  • 在 SearchView 中应用词干提取以从 Firebase 数据库获取数据

    我需要使用以下命令从 Firebase 数据库中获取用户列表SeachView或搜索对话框 我认为词干将最适合我的应用程序 不要求代码 但请告诉我它的算法 为了实现你想要的 你需要执行一个如下所示的查询 DatabaseReference
  • 菱形符号在 UML 类图中表示什么?

    考虑下面两个图 顶部的右端包含一个普通箭头 底部的一个左端包含一个带菱形的箭头 右端包含一个普通箭头 这很棒的书 GoF https rads stackoverflow com amzn click com 0201634988具有这两种
  • 在指定字符后使用正则表达式匹配序列

    初始字符串是 图片 salmon v5 09 14 2011 jpg 我想捕获文本 salmon v5 09 14 2011 jpg 并使用GSkinner 的正则表达式工具 http gskinner com RegExr 我能得到的最接
  • iPhone SDK:UIWebView 阻止图像加载/下载

    如何在 Xcode 中使用 UIWebView 以便在加载页面时不会下载图像 以加快页面加载速度 UIWebView是 WebKit 完整版的一个苍白 可怜的小影子WebView 这很容易 webView shouldStartLoadWi
  • Ruby 中的迄今为止的字符串

    我有很多类似 Mar 31 1999 的字符串值 有没有一种简单的方法可以将此字符串格式转换为 Ruby Date 您可以使用Date parse方法 gt Date parse Mar 31 1999 gt Wed 31 Mar 1999
  • MySQL选择总和大于阈值的记录

    我需要使用单个查询 无存储过程 根据 MySQL 数据库表中列出的文件大小选择记录 记录集应包含文件大小总和等于或超过特定阈值 如果需要 的所有记录 例如 阈值 30 结果返回 3 条记录 文件大小等于 10 10 20 或 10 10 1
  • MySQL 索引和顺序

    这是我一直以来的疑问 据我所知 索引的顺序很重要 所以像这样的索引 first name last name 不等于 last name first name right 如果我只定义第一个索引 是否意味着它只会用于 SELECT FROM
  • 如何将 单元格重新编码为 tibble 列表列中的嵌套 NA ()?

    在带有列表列的小标题中 我如何替换
  • 我可以使用 suncalc 创建一个数据表,其中包含各个地理位置的每个日期的日出和日落时间吗?

    我正在尝试写一个function输出一个州内各个县一年中每一天的日出和日落时间 目前 我有一个table包含各县及其所属的列latitudes and longitudes eg County Latitude Longitude Gran
  • AngularJS ng-show 与 ng-animate 意外行为

    问题是 当我快速双击按钮来切换 ng show 时 该值不会改变 这是预期的行为 它会切换 但实际元素将被隐藏 看这里 http jsfiddle net QbZrJ http jsfiddle net QbZrJ 如果快速双击 该值将保持
  • 在CSS3中制作一个有一侧的平行四边形

    我用 CSS3 制作了一个平行四边形 有了这个代码 parallelogram width 150px height 100px webkit transform skew 20deg moz transform skew 20deg o