Reputation: 41
Curved css boxes
I've tried asking this question before, thinking it would be quicker to use an image to get straight to the point, but I got into trouble because the jobsworths didn't read my issue properly and accused me of code hunting as I didn't actually add any code.
So, here's the code and the issue. Below show four boxes, spread in a arch design, but it needs the long edges, across the top and the bottom of each box to be curved slightly and I tried to use the transform:perspective(XXpx); [greatly increased to see if there is any obvious changes in this example], added to the transform attributes, but it doesn't seem to be giving me anything back.
Any help would be appreciated, even if its a "I don't think its possible" would help. I've been picking at this for months now and I need to move on with my life...
#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>This is the effect I'm trying to achieve:
Upvotes: 0
Views: 553
Answers (4)
Reputation: 41
That's what I would call a train crash course in SVG!
I'll get back to this with the animation and hover bits, once I've worked out how to do with SVG, unless anyone want to chip in ;)
<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>Upvotes: 1
Reputation: 4629
Here is one attempt that uses a border-radius to achieve a curvature along the bottom of each box, and then overlaps a pseudo element at the top of each element that's the same shape, only bigger, to take a similar curved cut out of the top of each box. Then we just add a more typical border-radius to the top left and top right corners of each box to finish the look.
An upside of this approach is that text wrapping isn't really a problem as Gerrit0 mentions is an issue with his solution. You can resize these boxes to whatever size you want, and you should get about the same result (resizing the container as well, of course).
I added pointer-events: none to the pseudo element so that you don't have any unwanted schenenagins there since the pseudo elements are fairly large. Still, if you have an image or gradient in the background of your page, this probably isn't going to work very well since we're relying on the pseudo element to be the same color as the back background in order to look invisible.
Another limitation is that you can't really do a border because the top border would have to come as a border-bottom on the pseudo elements (since they overlay the top of the divs), but the pseudos are wider than the actual divs, so it doesn't look right.
Curving the text itself I did not bother with because it's pretty complicated, but you can read about that on CSS Tricks.
As others have said, an SVG is probably the easiest solution here.
.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>Upvotes: 0
Reputation: 9182
Partial answer:
You can fake the curved borders by using a background radial gradient with a sufficiently large radius. This isn't exactly what you are looking for, but it does get fairly close.
I would not recommend using this. Making text wrapping work correctly is a pain and if you are told to change the size of the elements later, it will be a nightmare to do. CSS really isn't the right tool for this.
.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>Upvotes: 0
Reputation: 4759
On the mozilla border-radius page, https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius, they have this fiddle:
http://jsfiddle.net/Tripad/qnGKj/4/
Which shows a box with a curved border. Using that gives the code below.
#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;
}<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>Upvotes: 0