在 CSS 中绘制形状 [关闭]答案

【问题标题】：Drawing Shapes in CSS [closed]在 CSS 中绘制形状 [关闭]
【发布时间】：2014-10-15 01:28:41
【问题描述】：

知道如何在 CSS 中创建该形状以及如何在调整大小时使其始终居中吗？？

【问题讨论】：

你什么都没试过？
当时我正在考虑使用 translateX() 和 rotate() codepen.io/anon/pen/dCKcs
问题是旋转适用于 div 的中心...
这个问题的通用解决方案，在我的特定情况下使用具有透明值的border-top和broder-right不起作用codepen.io/anon/pen/vsaLc
找到可能的解决方案：codepen.io/anon/pen/vsaLc

【解决方案1】：

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

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);
}

【讨论】：

谢谢网络提基。您的解决方案要好得多。不知道transform-origin:100% 0;

【解决方案2】：

不是一个完美的解决方案，需要一些修改，但应该可以解决问题：

.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

【讨论】：