在CSS中绘制形状

Question

任何想法如何在CSS中创建该形状以及如何在调整大小时始终保持居中？

Answer 1

不是一个完美的解决方案，需要一些修改，但应该做到这一点：

.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.container {
   margin-left:-1000px;
   width: 4000px;
   height: 2000px;
   background-color: yellow;
}
.arrow {
   width: 0;
   height: 0;
   border-top: 2000px solid red;
   border-right: 2000px solid transparent;
}

您可以在此处查看：http://codepen.io/anon/pen/vsaLc

Answer 2

重点是使用变换并将变换原点设置在“固定”点上，这里右上角是这样的：

transform-origin:100% 0;

然后你可以旋转或扭曲你的元素：

<强> DEMO

HTML：

<div></div>

CSS：

body{
    background:gold;
}
div{
    position:absolute;
    width:100%; height:100%;
    right:50%; top:0;
    background:teal;
    -webkit-transform-origin:100% 0;
    transform-origin:100% 0;
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
}