Question

我试图按以下方式设置两个三角形：

两个三角形必须从浏览器的中间到外部。我尝试用包装器和背景颜色设置它，然后旋转包装器，但我不能让它响应。我试过的代码是：

＆＃13;

    #page-header-wrapper-triangle {
    background-color:#e14b41 ; 
    -webkit-transform: rotate(-12deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-12deg);
    -o-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    transform: rotate(-12deg);
    margin: 0 -21px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-backface-visibility: hidden;
    outline: 1px solid transparent;
    position: relative;
    min-height: 204px;
    z-index:1000;
    width:80%;
    }
    #page-header-wrapper-triangle-2 {

    background-color:#e14b41 ; 
    -webkit-transform: rotate(12deg) translate3d(0, 0, 0);
    -moz-transform: rotate(12deg);
    -o-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    transform: rotate(12deg);
    margin: 0 -54px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-backface-visibility: hidden;
    outline: 1px solid transparent;
    position: relative;
    min-height: 204px;
    z-index:1000;
    width:80%;
    float:right;
    top:-520px;
    }

＆＃13;

<div id="page-header-wrapper-triangle">
	<div class="container">
        <div class="row">
        	<div class="right-red col-xs-12 col-sm-6">
            	
            </div>
            <div class="left-blue col-xs-12 col-sm-6">
            </div>
		</div>
	</div>   
</div>

<div id="page-header-wrapper-triangle-2">
	<div class="container">
        <div class="row">
        	<div class="right-red col-xs-12 col-sm-6">
            	
            </div>
            <div class="left-blue col-xs-12 col-sm-6">
            </div>
		</div>
	</div>   
</div>

＆＃13;

当浏览器的宽度为1920像素时，这种方法有效，但是当我改变宽度时它不起作用。我不知道如何才能获得这种响应。

我也尝试过背景图片。但这也行不通。

Answer 1

您可以使用伪选择器:after来完成。它的响应准备只适用于一些中小宽度。但您可以轻松自定义媒体查询并更改top和height值。

There is a live example using SCSS

.header {
  background-color: grey;
  padding-bottom: 60px;
  padding-top: 60px;
  position: relative;
  display: inline-block;
  width: 100%;
}
.header .block-left {
  float: left;
  width: 50%;
}
.header .block-left:after {
  background-color: red;
  content: ' ';
  left: 0;
  top: -125px;
  height: 200px;
  position: absolute;
  transform: skew(0deg, -15deg);
  width: 50%;
  z-index: 20;
}
.header .block-right {
  float: right;
  width: 50%;
}
.header .block-right:after {
  right: 0;
  background-color: yellow;
  content: ' ';
  top: -125px;
  height: 200px;
  position: absolute;
  transform: skew(0deg, 15deg);
  width: 50%;
  z-index: 20;
}

<div class="header">
  <div class="block-left"></div>
  <div class="block-right"></div>
</div>

Answer 2

以下是对css三角形如何工作的解释：http://codepen.io/chriscoyier/pen/lotjh

@import url(http://fonts.googleapis.com/css?family=Andika);

$stepTiming: 0.8s 0.2s;

.triangle-demo {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: tan;
  border-top: 0 solid #EE7C31;
  border-left: 0 solid #F5D97B; 
  border-bottom: 0 solid #D94948;
  border-right: 0 solid #8DB434;
  transition: $stepTiming;

  .step-1 & {
    border-top-width: 10px;
  }
  .step-2 & {
    border-left-width: 10px;
  }
  .step-3 & {
    border-right-width: 10px;
  }
  .step-4 & {
    border-bottom-width: 10px;
  }
  .step-6 & {
    background: transparent;
  }
  .step-7 & {
    width: 0; height: 0;
  }
  .step-8 & {
    border-left-color: transparent;
  }
  .step-9 & {
    border-right-color: transparent;
  }
  .step-10 & {
    border-top-color: transparent;
  }
}

.triangle-title {
  width: 300px;
  padding: 1rem;
  color: white;
  background: #D94948;
  border-radius: 20px;
  margin: auto;
  opacity: 0;
  transition: $stepTiming;
  .step-11 & {
    opacity: 1;
  }
}

body {
  background: #333;
  font-family: 'Andika', sans-serif;
  color: white;
  text-align: center;
  font-size: large;
  transform: translateZ(0);
}

.steps {
  position: relative;
  height: 45px;
  > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    background: #333;
    transition: 0.3s;
  }
  .step-0 {
    opacity: 1; 
  }
  .step-1 & .step-1 {
    opacity: 1; 
  }
  .step-2 & .step-2 {
    opacity: 1; 
  }
  .step-5 & .step-5 {
    opacity: 1; 
  }
  .step-6 & .step-6 {
    opacity: 1; 
  }
  .step-7 & .step-7 {
    opacity: 1; 
  }
  .step-8 & .step-8 {
    opacity: 1; 
  }
  .step-11 & .step-11 {
    opacity: 1; 
  }
}

h1 {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.5rem;
  border-bottom: 1px solid #555;
  color: #999;
}

仅供参考http://1stwebdesigner.com/css-shapes/

创建一个响应三角形

2 个答案: