个人中心
gpt4 book ai didi

css - flex 的 css 框

转载 作者：太空宇宙 更新时间：2023-11-04 08:17:05 24 4
gpt4 key购买 nike

我以前试过问过这个问题，认为使用图像直截了当会更快，但我遇到了麻烦，因为 jobsworths 没有正确阅读我的问题并指责我寻找代码我实际上并没有添加任何代码。

所以，这是代码和问题。下面显示了四个盒子，以拱形设计展开，但它需要长边，每个盒子的顶部和底部稍微 flex ，我尝试使用 transform:perspective(XXpx); [大大增加，看看这个例子有没有明显的变化]，添加到transform属性，但它似乎没有给我任何返回。

任何帮助将不胜感激，即使是“我认为这不可能”会有所帮助。几个月来我一直在挑这个问题，我需要继续我的生活......

#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>

这是我想要达到的效果: enter image description here

最佳答案

这就是我所说的 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/

24 4 0
文章推荐： python - 如何在 Pyramid 中通过 POST 提交请求？
文章推荐： c - 试图在 C 中交换字符串？
文章推荐： java - "java.sql.SQLException The column .. in table .. does not allow null values"尽管列值不为空
文章推荐： c - MingW 编译器中 C 中的 And 语句导致的错误
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com