我曾经尝试过问这个问题，以为使用图像可以更直接地指出问题，但是我遇到了麻烦，因为乔布斯夫妇没有正确地阅读我的问题，并指责我像我一样去寻找代码。实际上没有添加任何代码。
所以，这是代码和问题。下面显示了四个以拱形设计分布的框，但是它需要较长的边缘，每个框的顶部和底部都需要稍微弯曲一些，我尝试使用transform：perspective（XXpx）; [大大增加以查看此示例中是否有任何明显的更改]，已添加到转换属性中，但似乎并没有给我任何回报。
任何帮助将不胜感激，即使它的“我认为不可能”会有所帮助。我已经挑选了几个月了，我需要继续前进...
#boxCap {
position:absolute;
left:80px;
top:20px;
margin: 30px;
padding:40px;
background-color: #EFA7EA;
border-radius: 15px;
border: solid #fff;
width: 150px;
height: 30px;
text-align: center;
font-size: x-large;
color: #fff;
transform-origin: left bottom;
transform: rotate(15deg) skewX(-30deg) skewY(10deg) perspective(40px);
box-shadow: 0 0 15px grey;
}
#boxCIA {
position:absolute;
left:345px;
top:140px;
margin: 30px;
padding:40px;
background-color: #EFA7EA;
border-radius: 15px;
border: solid #fff;
width: 150px;
height: 30px;
text-align: center;
font-size: x-large;
color: #fff;
transform-origin: left bottom;
transform: rotate(6deg) skewX(-10deg) skewY(5deg) perspective(40px);
box-shadow: 0 0 15px grey;
}
#boxCase {
position:absolute;
left:640px;
top:140px;
margin: 30px;
padding:40px;
background-color: #EFA7EA;
border-radius: 15px;
border: solid #fff;
width: 150px;
height: 30px;
text-align: center;
font-size: x-large;
color: #fff;
transform-origin: right bottom;
transform: rotate(-6deg) skewX(10deg) skewY(-5deg) perspective(40px);
box-shadow: 0 0 15px grey;
}
#boxDVD {
position:absolute;
left:900px;
top:20px;
margin: 30px;
padding:40px;
background-color: #EFA7EA;
border-radius: 15px;
border: solid #fff;
width: 150px;
height: 30px;
text-align: center;
font-size: x-large;
color: #fff;
transform-origin: right bottom;
transform: rotate(-15deg) skewX(30deg) skewY(-10deg) perspective(40px);
box-shadow: 0 0 15px grey;
}<head>
<link rel="stylesheet" href="skew.css" />
</head>
<body>
<div id="boxCap">
Capabilities
</div>
<div id="boxCIA">
Cap in Action
</div>
<div id="boxCase">
Case Studies
</div>
<div id="boxDVD">
DVD
</div>
</body>这是我想要达到的效果：
最佳答案
那就是我所说的SVG中的火车速成课程！
一旦我弄清楚了如何使用SVG，我将用动画和悬停位重新回到这一点，除非有人想加入;）
<svg version="1.1" id="Layer_1" xmlns:x="" xmlns:i="" xmlns:graph="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="635.34px" height="117.82px" viewBox="0 0 635.34 117.82" enable-background="new 0 0 635.34 117.82" xml:space="preserve">
<switch>
<g i:extraneous="self">
<g>
<g>
<g>
<path fill="#E91C6A" stroke="#F299A7" stroke-miterlimit="10" d="M149.313 86.953c-2.874 4.987-9.442 7.977-14.653 6.589C90.021 81.663 46.267 65.358 4.057 44.628c-4.927-2.419-4.501-7.72 0.92-11.752 12.087-9.07 24.174-18.141 36.261-27.211C46.66 1.63 54.299 0.017 58.323 1.991c34.903 17.142 71.084 30.625 107.998 40.447 4.255 1.133 5.385 6.042 2.511 11.031C162.326 64.631 155.819 75.792 149.313 86.953z"/>
</g>
<text x="50" y="18" transform="rotate(21) skewX(-18) skewY(0)" font-family="sans-serif" font-size="20px" fill="white">Capabilities</text>
<g>
<path fill="#E91C6A" stroke="#F299A7" stroke-miterlimit="10" d="M311.714 107.759c-0.071 5.339-4.466 9.642-9.814 9.523 -45.819-1.009-91.562-6.444-136.572-16.305 -5.254-1.15-7.284-6.224-4.549-11.244 6.062-11.27 12.125-22.538 18.188-33.807 2.735-5.023 8.422-8.278 12.713-7.339 37.218 8.154 75.044 12.648 112.933 13.482 4.367 0.098 7.852 4.451 7.781 9.792C312.167 83.827 311.94 95.793 311.714 107.759z"/>
</g>
<text x="210" y="49" transform="rotate(8) skewX(-18) skewY(0)" font-family="sans-serif" font-size="20px" fill="white">Capabilities</text>
<text x="225" y="74" transform="rotate(6) skewX(-18) skewY(0)" font-family="sans-serif" font-size="20px" fill="white">in Action</text>
<g>
<path fill="#E91C6A" stroke="#F299A7" stroke-miterlimit="10" d="M630.17 32.876c5.422 4.033 5.848 9.333 0.921 11.752 -42.21 20.73-85.965 37.035-130.604 48.914 -5.21 1.388-11.778-1.602-14.652-6.589 -6.506-11.161-13.012-22.322-19.518-33.484 -2.874-4.99-1.745-9.897 2.511-11.031 36.913-9.823 73.094-23.305 107.998-40.447 4.022-1.975 11.662-0.361 17.084 3.674C605.996 14.735 618.083 23.806 630.17 32.876z"/>
</g>
<g>
<path fill="#E91C6A" stroke="#F299A7" stroke-miterlimit="10" d="M474.367 89.733c2.735 5.021 0.706 10.094-4.548 11.244 -45.009 9.86-90.753 15.296-136.572 16.305 -5.348 0.118-9.742-4.185-9.813-9.523 -0.227-11.966-0.453-23.932-0.68-35.897 -0.071-5.341 3.414-9.694 7.78-9.792 37.889-0.834 75.715-5.328 112.934-13.482 4.29-0.939 9.977 2.316 12.712 7.339C462.242 67.195 468.305 78.464 474.367 89.733z"/>
</g>
<text x="303" y="130" transform="rotate(-6) skewX(11) skewY(0)" font-family="sans-serif" font-size="20px" fill="white">Case Studies</text>
<text x="431" y="235" transform="rotate(-19.7) skewX(11) skewY(0)" font-family="sans-serif" font-size="20px" fill="white">DVD</text>
</g>
</g>
</g>
</switch>
</svg>关于css - flex 的CSS盒子，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45824391/