Question

晚上好，每个人，

我一直想知道现在最好的方法是做什么。请参阅此链接，例如：http://prntscr.com/48a54f

基本上，如果我有一个全宽度的网站，但我希望有2种颜色不仅仅是块，而是具有这种形状。还要记住，该网站会有响应。我假设我可以解决媒体查询的一些较小的对齐问题，但在这里使用的最佳做法是什么？有CSS3转换选项吗？（我不需要太担心旧的浏览器支持），我的想法是，如果有一个css3转换选项可以应用于div或section标签，那么我可以将内容嵌入到半列中，类似于这可能吗？

<section class="backgroundStyle">
    <div class="column-6">
        <!-- some content -->
    </div>
    <div class="column-6">
        <!-- some content -->
    </div>
</section>

非常感谢任何帮助。感谢您

Answer 1

你可以使用额外的伪元素和变换来实现。背景图像或渐变可能是最有效的，但是，如果您需要调整它，可以对每一侧进行更多控制。

#outer {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}

#left {
    width: 50%;
    height: 100%;
    background-color: #CCC;
}

#right {
    width: 50%;
    background-color: #333;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

#right:after {
  content: "";
  display: block;
  width: 30%;
  transform: rotation(50deg);
  background-color: #333;
  position: absolute;
  left: -20%;
  top: -5%;
  height: 120%;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

<div id="outer">
    <div id="left"></div>
    <div id="right"></div>
</div>

http://jsfiddle.net/dHLHt/2/

Answer 2

可以做一个CSS渐变：

http://jsfiddle.net/isherwood/28agr/

background: linear-gradient(135deg, rgba(186, 39, 55, 1) 0%, rgba(186, 39, 55, 1) 51%, rgba(239, 197, 202, 1) 51%, rgba(239, 197, 202, 1) 100%);

http://www.cssmatic.com/gradient-generator

CSS3背景颜色形状样式

2 个答案: