CSS solution for this
Hey guys, to get the notch in middle I've used two divs with border radius. But now because of that text inside one div wont expand. I can I use css so that the blockquote expands all the the way across ??
CSS:
.callout-box {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.box {
flex: 1;
padding: 54px;
border: 2px solid #0A5CC7;
min-width: 300px;
}
.box--left {
border-right: none;
border-top-right-radius: 20px;
}
.box--right {
border-left: none;
border-top-left-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box__text {
margin: 0;
}
.cpa-blockquote-holder{
position: relative;
}
.cpa-blockquote{
position: absolute;
margin: 0px;
padding: 0px;
border: none;
right: 27%;
text-align: center;
color: #0A5CC7;
font-family: 'Avenir';
font-style: normal;
font-weight: 900;
font-size: 50px;
line-height: 68px;
}
HTML:
<div class="scaffold-media-box" data-context-menu="insert delete" editable="false" caninsert="false">
<div class="callout-box">
<div class="box box--left">
<blockquote class="cpa-blockquote">“this is a quote block here that we can use if needed to add emphasis”</blockquote>
</div>
<div class="box box--right">
</div>
</div>
</div>
22 Replies
Codepen please
The issue you're having is that the
blockquote is nested inside the .box--left element. Instead, you should have the two radius-boxes be empty and have the blockquote be a sibling to those elements:
https://codepen.io/c__beck/pen/NWLEoqLI also removed a lot of un-needed code like absolute positioning,
px font sizing, line-height, etc.Of course you could do away with the multi-box approach and use
::before and ::after:
https://codepen.io/c__beck/pen/jOvQdmRThanks for the answer. The use of two divs to get the notch is not ideal solution. What do you think is the best approach to get around this situation ?
My second codepen doesn't rely on the two divs. Instead it uses
::before and ::after to make the notches.Ohh, I didn't see the second link. Could you help me understand the code? How did you target the centre of the top line? If I need to target centre of the right side line, how to comprehend the code ?
The
::before pseudo-element takes the place of the left-side div, ditto for ::after and the right-side div
I simply replaced the actual elements with the pseudo-elements
In my opinion the only reason to have an empty element is so you can later fill it with JS (or if it's to house a background image or something, but even then an image tag would probably be better).Ahh, this is very helpful. Thanks for the explanation. One more q, right now the notch is inwards. If I had to do it outwards. What is the thought process.
At the top-left and top-right corners? Change the border radius location. Easy peasy!
Ohh no no I mean. See the notch is pointed inside the box. What if I wanted to point it outside.
And with just a few small modifications you can get some really fun stuff going on!
You are a legend. I was trying a lot and you solved in matter of minutes. Thanks again !
That's what we're here for!
Well done !!
Hi again, I cannot find a way again to place notch in right side of the box, pointing right side.
Nevermind, I figured out !
Now the another problem is. When I apply background color. Color does not fill the notch part.
This is something what I want
Do you have a link for where you're seeing that? I've been trying to figure this out for the past few hours and can't
see the pseudoelements for
figcaption, you can uncomment the background-color to see how the shape is made from the box-shadow
https://play.tailwindcss.com/hEClB4PMgm?file=cssTailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
no tailwind, just a throwaway codepen