html - 水平倾斜元素但恰好在右侧-6ren

html - 水平倾斜元素但恰好在右侧

转载作者：太空宇宙更新时间：2023-11-04 13:18:41

24

4

我想借助 HTML 5 和 CSS 3 进行如下设计。这里是 jsfiddle我是怎么做到的。

enter image description here

这是示例代码

<div class="header">Akşam Sizin İçin Önerdiklerimiz
    <div class="skew"></div>
</div>
<div class="line"></div>

.header {
    color: white;
    font-size: 14px;
    display: inline-block;
    padding: 5px 10px;
    background-color: #6b6a69;
    position: relative;
}
.skew {
    position: absolute;
    -moz-transform: skewX(45deg);
    -ms-transform: skewX(45deg);
    -o-transform: skewX(45deg);
    -webkit-transform: skewX(45deg);
    transform: skewX(45deg);
    right: -14px;
    display: inline-block;
    width: 40px;
    height: 30px;
    top: 0;
    background: inherit;
    z-index: -1;
}
.line {
    height: 11px;
    background-color: #6b6a69;
    margin-top: -7px;
}

如您所见，我使用了 3 个 html 元素来构建它。我想要实现的是为整个设计提供渐变背景色。但是有 3 个不同的元素，所以我只能分别为每个元素应用渐变，这看起来不像我想要的那样。

所以我试图通过 CSS 3 功能(如转换)仅通过 1 个元素来实现该设计。至少通过删除 div.skew 元素只倾斜图片中的右侧对我来说是一个改进。

如果可以，那我该怎么做呢？

编辑:这里是 example当我应用渐变时它看起来如何，这就是为什么我想简单地删除额外的元素以将渐变应用于整个设计。

最佳答案

这将是一种更简单的方法:http://codepen.io/pageaffairs/pen/aDoFc

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.header {
    color: white;
    font-size: 14px;
    padding: 0 0 20px 0;
    background-color: #6b6a69;
    position: relative;
    background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(180,187,193,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(180,187,193,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(180,187,193,1) 100%); 
    background: -o-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(180,187,193,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(180,187,193,1) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(180,187,193,1) 100%); /* W3C */
    overflow: hidden;
}

span {position: relative; display: inline-block; padding: 5px 10px 0 10px;}
span:after {
    content: " ";
    width: 2000px;
    height: 0;
    position: absolute;
    border-top: 20px solid white;
    border-right: 0 solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 20px solid transparent;
    left: 100%;
    top: 0;
}

</style>
</head>
<body>

<div class="header">
    <span>Akşam Sizin İçin Önerdiklerimiz</span>
</div>

</body>
</html>

关于html - 水平倾斜元素但恰好在右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24216625/

24

4

0

文章推荐： css - Z-index 不隐藏背景

文章推荐： c++ - 如何让 RakNet 更可靠？

文章推荐： c++ - 使用前一个节点的地址删除节点

iPhone 倾斜 CALayer
我是初学者，我正在做一些练习来熟悉 CALayer ... 我只是想知道如何“倾斜”(或倾斜)CALayer 45° 角？谢谢。最佳答案 CALayers 有一个属性 affineTransfor
html - 倾斜/倾斜的表头
无法理解如何制作this trick或 this与CSS。我的意思是标题和标志。这条线不直。它们是倾斜的/倾斜的边界。能否请您举个例子或只是举例说明这是可行的？最佳答案看看https://jsfi
iPhone 图像拉伸(stretch)(倾斜)
如何倾斜图像？例如，每个角都有一个 CGPoint，其坐标为 - p1、p2、p3、p4。然后，我需要设置 - p4.x+=50，p4.y+=30。因此这个角 (p4) 应该在 2D 透视中拉伸(st
html - 使用css实现浮雕/倾斜/3d边框效果
我想弄清楚如何通过仅使用 css 来实现元素底部的跟随边框，并使其尽可能对跨浏览器友好示例代码，带有标准边框 .object { width: 200px; height: 45p
html - 倾斜 Bootstrap 导航列表项并保持链接直
我正在尝试使用 CSS transform 来倾斜 Bootstrap 导航 li，我可以做到这一点，但是当我尝试扭转内部链接上的倾斜时，li 倾斜也会反转回来。我不知道为什么。我试着做这里接受的答案
CSS only 2 条纹背景(倾斜)
这个问题在这里已经有了答案: CSS: Set a background color which is 50% of the width of the window (14 个答案) 关闭 7 年前
html - 倾斜 Div 上的导航栏
我已经创建了一个预定的 div 来与我的导航栏一起使用，但是它弄乱了网站的其余格式。导航栏位于右上角，倾斜的 div 位于其下方，但它弄乱了网页上的所有其他内容。我一直在尝试一切都无济于事。 http
CSS3 一侧边框剪切/变换/倾斜
你好，我想像这里的附图一样对步骤菜单进行风格化。我该如何风格化这个？主要问题是菜单右侧的边框。检查我的 JSFiddle URL https://jsfiddle.net/hcx1pv8x/ , 不
javascript - 没有平移副作用的 SVG 倾斜
我正在尝试使用 HTML5 在 javascript 中倾斜 svg 元素，例如: 中的矩形元素是倾斜的，但 rect 元素也向右移动(不需要)，我尝试手动设置位置使用 transform
html - 倾斜 div 容器上的文本溢出
目前我对应该倾斜的容器使用clip-path。 .box { height: 150px; line-height: 150px; text-align: center; backgr
python - OpenCV - 调整照片倾斜角度(倾斜)
我有一个相机从上方指向禅宗花园。然而，相机固定在侧面而不是直接在板的上方。结果，图像看起来像这样(注意矩形的倾斜形状): 有没有办法处理图像，使沙子区域看起来或多或少像一个完美的正方形？ cap =
objective-c - UIScrollview 倾斜
我正在尝试使用倾斜 350 度的 UIScrollview，我首先想到的是使用变换属性，滚动上的倾斜起作用了，但现在滚动上的所有内容看起来都不对，当我谈论所有内容时，我指的是位置和这个卷轴的所有 ch
ruby-on-rails - 倾斜(Bundler 依赖错误)
我需要将我的应用程序升级到 Rails 3.2.16，当时我做了 bundle update rails它给了我以下错误。 Bundler could not find compatible vers
ruby-on-rails - Gem::LoadError: 倾斜？
我正在尝试运行 rake db:migrate在本地，但我收到以下错误: Gem::LoadError: You have already activated rake 10.2.2, but you
带有背景图片的 CSS3 倾斜 div，整个图片后面有图片
很难用语言表达我想要完成的事情，所以请查看这张照片作为示例: 如您所见，我希望创建一个带有图案背景的倾斜 div(简单)，但另一部分，即倾斜被半遮住的部分，也必须有背景图像。我想到了很多不同的想法，并
loops - 如何使用嵌套 for 循环将两个二维(倾斜)数组相加？
假设，我想将两个二维数组添加到第三个二维数组中。我正在使用以下代码: cudaMallocPitch((void**)&device_a, &pitch, 2*sizeof(int),2); cud
带有背景图片的 CSS3 倾斜 div，整个图片后面有图片
很难用语言表达我想要完成的事情，所以请查看这张照片作为示例: 如您所见，我希望创建一个带有图案背景的倾斜 div(简单)，但另一部分，即倾斜被半遮住的部分，也必须有背景图像。我想到了很多不同的想法，并
javascript - jquery 倾斜/ curl 引号混淆
我刚刚遇到了这种附加字符串的变体，其中包含存储在变量中的值，这是我以前从未见过的。谁能帮我解释一下这是怎么回事？这是我遇到的情况: var fruit = "banana"; $main = $('
loops - 如何使用嵌套 for 循环将两个二维(倾斜)数组相加？
假设，我想将两个二维数组添加到第三个二维数组中。我正在使用以下代码: cudaMallocPitch((void**)&device_a, &pitch, 2*sizeof(int),2); cud
Java Visual VM 倾斜 CPU
我正在尝试分析在 Windows 上运行的 Java UI 应用程序的 CPU 使用率。我将它连接到 VisualVM，但看起来 CPU 使用率最高的是 sum.rmi.transport.tcp.T

首页

博学

6Ren·AI

商城

html - 水平倾斜元素但恰好在右侧