弯曲的css盒子

时间：2017-08-22 18:14:18

标签： css

之前我曾尝试过问过这个问题，认为使用图像直接达到这一点会更快，但我遇到了麻烦，因为jobworths没有正确地阅读我的问题，并指责我打码为我实际上没有添加任何代码。

所以，这是代码和问题。下面显示了四个框，在拱形设计中展开，但它需要长边，每个框的顶部和底部稍微弯曲，我尝试使用变换：透视（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>

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

4 个答案:

答案 0 :(得分：1)

这就是我所谓的SVG火车速成课程！

一旦我弄清楚如何处理SVG，我会再次使用动画和悬停位，除非有人想要插入;）

sizeInPts

答案 1 :(得分：0)

在mozilla border-radius页面https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius上，他们有这个小提琴：

http://jsfiddle.net/Tripad/qnGKj/4/

其中显示带有弯曲边框的框。使用它给出了下面的代码。

＆＃13;
＆＃13; 
#boxCap {
    position:absolute;
    left:80px;
    top:20px;
    margin: 30px;
    padding:40px;
    background-color: #EFA7EA;
 border-radius: 50%/15px 15px 25px 25px;
    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: 50%/15px 15px 25px 25px;
    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: 50%/15px 15px 25px 25px;
    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: 50%/15px 15px 25px 25px;
    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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

部分答案：

您可以使用具有足够大半径的背景径向渐变来伪造弯曲边框。这不是你想要的，但确实相当接近。

我不建议使用它。使文本包装正常工作是一件痛苦的事情，如果你被告知稍后改变元素的大小，那将是一件噩梦。 CSS真的不适合这个。

.curved {
  width: 200px; 
  height: 75px;
  background: radial-gradient(circle 1200px at 50% -600px, transparent 630px, red 630px, red 710px, transparent 710px);
  padding: 30px;
  font-size: 30px;
  text-align: center;
}
<div class='curved'>Text</div>
<div class='curved'>Longer text to wrap</div>

答案 3 :(得分：0)

这是一次尝试，使用border-radius沿每个框的底部实现曲率，然后重叠每个元素顶部的伪元素，这些元素具有相同的形状，只是更大，以采取相似的方式弯曲切出每个盒子的顶部。然后我们只在每个方框的左上角和右上角添加一个更典型的border-radius来完成外观。

这种方法的优点是文本包装不是真正的问题，因为Gerrit0提到的是他的解决方案的问题。你可以将这些盒子的大小调整到你想要的大小，你应该得到相同的结果（当然也要调整容器的大小）。

我将pointer-events: none添加到伪元素中，因此伪元素相当大，因此您没有任何不需要的schenenagins。尽管如此，如果你的页面背景中有一个图像或渐变，这可能不会很好地工作，因为我们依靠伪元素与背景颜色相同，以便看起来不可见。

另一个限制是你不能真正做边框，因为顶部边框必须作为伪元素的border-bottom（因为它们覆盖了div的顶部），但伪更宽比实际的div，所以它看起来不正确。

弯曲文本本身我没有理由，因为它非常复杂，但你可以read about that on CSS Tricks。

正如其他人所说，SVG可能是最简单的解决方案。

.wrapper {
  width: 680px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}
.card {
  width: 150px;
  height: 80px;
  background-color: rgb(243,153,167);
  color: rgb(243,243,244);
  font-family: Arial;
  font-size: 1.33em;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  border-bottom-right-radius: 50% 25%;
  border-bottom-left-radius: 50% 25%;
  border-top-right-radius: 25%;
  border-top-left-radius: 25%;
  position: relative;
}
.card::before {
  content: "";
  display: block;
  position: absolute;
  top: -85%;
  left: -15%;
  width: 130%;
  height: 100%;
  background-color: white; /* same color as your page's background color */
  border-bottom-right-radius: 50% 25%;
  border-bottom-left-radius: 50% 25%;
  pointer-events: none;
}
.card:nth-child(1) {
  transform: rotateZ(20deg) translateY(-20%);
}
.card:nth-child(2) {
  transform: rotateZ(5deg) translateY(35%);
}
.card:nth-child(3) {
  transform: rotateZ(-5deg) translateY(35%);
}
.card:nth-child(4) {
  transform: rotateZ(-20deg) translateY(-20%);
}
.card span {
  display: block;
  margin: auto;
  text-align: center;
}
<div class="wrapper">
  <div class="card"><span>Capabilities</span></div>
  <div class="card"><span>Capabilities in Action</span></div>
  <div class="card"><span>Case Studies</span></div>
  <div class="card"><span>DVD</span></div>
</div>

相关问题
最新问题