旋转div而不旋转内部

Question

我想用css创建这个图像样式。我创建了部分，但我很难旋转它。我希望绿色部分笔直，但是当我旋转主包装时，所有东西都会旋转。但这是错误的。

供参考，请查看图片 http://prntscr.com/jempp4

任何类型的帮助将不胜感激。不确定如果我已经解释了我的问题是好方法。 提前谢谢。

＆＃13;

＆＃13;

.banner-bg{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    transform: rotate(-15deg);
}
.banner-bg .banner-bg-sec{
    width: 33.3333%;
    position: relative;
}
.bg-green{
    background: #528E72;
}
.bg-blue{
    background: #4C6CC1;
}
.bg-blue2{
    background: #4475D4;
}
.bg-red{
    background: #CB431B;
}
.bg-red2{
    background: #F54F1D;   
}
.bg-inner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    text-align: center;
    box-shadow: 0px 4px 1px -2px rgba(0,0,0,0.2);
}
.bg-text{
    font-size: 28px;
    color: rgba(255,255,255,0.6);
}
.bg-icon{
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.bg-icon li{
    display: inline-block;
    vertical-align: middle;
}
.bg-icon li a{
    text-decoration: none;
    display: block;
    font-size: 22px;
    color: #fff;
    padding-right: 20px;
}

＆＃13;

<div class="banner-bg">
      <div class="banner-bg-sec bg-blue">
          <div class="bg-inner bg-text bg-blue2">
              <span>HIGH SCHOOLS</span>
          </div>
      </div>
      <div class="banner-bg-sec bg-green"></div>
      <div class="banner-bg-sec bg-red">
          <div class="bg-inner bg-red2">
              <ul class="bg-icon">
                  <li>
                      <a href="#">
                          F
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          T
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          I
                      </a>
                  </li>
              </ul>
          </div>
      </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

嗯有趣..也许看看变换：skewY而不是旋转......虽然你必须＆＃34; unkew＆＃34;文本或找到其他方式来放置它......

＆＃13;

＆＃13;

.banner-bg{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    transform: skewY(-15deg);
}
span, ul {
    transform: skewY(15deg) rotate(-15deg);
}

.banner-bg .banner-bg-sec{
    width: 33.3333%;
    position: relative;
}
.bg-green{
    background: #528E72;
}
.bg-blue{
    background: #4C6CC1;
}
.bg-blue2{
    background: #4475D4;
}
.bg-red{
    background: #CB431B;
}
.bg-red2{
    background: #F54F1D;   
}
.bg-inner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    text-align: center;
    box-shadow: 0px 4px 1px -2px rgba(0,0,0,0.2);
}
.bg-text{
    font-size: 28px;
    color: rgba(255,255,255,0.6);
}
.bg-icon{
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.bg-icon li{
    display: inline-block;
    vertical-align: middle;
}
.bg-icon li a{
    text-decoration: none;
    display: block;
    font-size: 22px;
    color: #fff;
    padding-right: 20px;
}

＆＃13;

<div class="banner-bg">
      <div class="banner-bg-sec bg-blue">
          <div class="bg-inner bg-text bg-blue2">
              <span>HIGH SCHOOLS</span>
          </div>
      </div>
      <div class="banner-bg-sec bg-green"></div>
      <div class="banner-bg-sec bg-red">
          <div class="bg-inner bg-red2">
              <ul class="bg-icon">
                  <li>
                      <a href="#">
                          F
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          T
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          I
                      </a>
                  </li>
              </ul>
          </div>
      </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你只能旋转列的标题并使用clip-path裁剪主容器，将蓝色的一个推到底部并使标题覆盖整个宽度，稍微加宽它使用overflow-x:hidden作为其父级，请查看此小提琴中的结果：https://jsfiddle.net/fyhv9r8h/

＆＃13;

＆＃13;

#header {
  background: url('https://kilianvalkhof.com/wp-content/themes/kvsixteen/static/img/bg2.jpg');
  width: 100%;
  height: 230px;
  position: absolute;
}

.banner-bg {
 position: absolute;
top: 100px;
width: 100%;
height: 160px;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
clip-path: polygon(0% 38%, 100% 0%, 100% 100%, 0% 100%);
}

.banner-bg .banner-bg-sec {
  width: 33.3333%;
  position: relative;
  overflow-x: hidden;
}

.bg-green {
  background: #528E72;
}

.bg-blue {
  background: #4C6CC1;
  top: 38px;
}

.bg-blue2 {
  background: #4475D4;
}

.bg-red {
  background: #CB431B;
}

.bg-red2 {
  background: #F54F1D;
}

.bg-inner {
  position: absolute;
  top: 0;
  left: -10px;
  width: 100%;
  padding: 15px;
  text-align: center;
  box-shadow: 0px 4px 1px -2px rgba(0, 0, 0, 0.2);
  transform: rotate(-6deg)
}

.bg-text {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.6);
}

.bg-icon {
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.bg-icon li {
  display: inline-block;
  vertical-align: middle;
}

.bg-icon li a {
  text-decoration: none;
  display: block;
  font-size: 22px;
  color: #fff;
  padding-right: 20px;
}

＆＃13;

<div id="header">

</div>
<div class="banner-bg">
  <div class="banner-bg-sec bg-blue">
    <div class="bg-inner bg-text bg-blue2">
      <span>HIGH SCHOOLS</span>
    </div>
  </div>
  <div class="banner-bg-sec bg-green"></div>
  <div class="banner-bg-sec bg-red">
    <div class="bg-inner bg-red2">
      <ul class="bg-icon">
        <li>
          <a href="#">F</a>
        </li>
        <li>
          <a href="#">T</a>
        </li>
        <li>
          <a href="#">I</a>
        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;