Question

我想通过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当我应用渐变时的外观，这就是为什么我想简单地移除额外的元素以将渐变应用于整个设计。

Answer 1

这是一种更简单的方法：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>

水平偏斜元素但右侧偏斜

1 个答案: