How to achieve curved top pointer
One option is to create a normal rectangle and then position two circles over it, such that they create a curved point.
In the demo below, this rectangle is represented by the .point div, and the circles are represented by the pseudo-elements ::before and ::after.
.caption {
position: relative;
width: 350px;
margin-top: 40px;
}
.caption>.content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 30px;
background-color: green;
color: white;
text-align: center;
}
.caption>.point {
position: absolute;
left: 50%;
top: -30px;
width: 30%;
height: 30px;
transform: translateX(-50%) translateZ(1px);
overflow: hidden;
background-color: green;
}
.caption>.point::before,
.caption>.point::after {
content: '';
display: block;
width: 100%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
background-color: white;
}
.caption>.point::before {
transform: translateX(-49%) translateY(-50%);
}
.caption>.point::after {
transform: translateX(49%) translateY(-50%);
}<div class="caption">
<div class="point"></div>
<div class="content">This is some text!</div>
</div>How to create a triangular shape with curved border?
You can do it with some perspective and rotation:
.box {
margin:20px;
padding:20px calc(50% - 100px); /* this will fix the max width to 2x100px */
/* the horizontal lines (one on each side)*/
background:
linear-gradient(red,red) left,
linear-gradient(red,red) right;
background-size:calc(50% - 100px) 2px;
background-repeat:no-repeat;
/* */
text-align:center;
position:relative;
}
.box::before,
.box::after{
content:"";
position:absolute;
top:-10px; /* lower than 0 to avoid the overlap due to rotation */
/* same as the padding */
left:calc(50% - 100px);
right:calc(50% - 100px);
/* */
bottom:50%;
border:3px solid red;
border-bottom:none;
border-radius:15px 15px 0 0;
/* adjust here to control the shape */
transform:var(--s,scaley(1)) perspective(40px) rotateX(25deg);
/* */
transform-origin:bottom;
}
.box::after {
--s:scaley(-1);
}<div class="box"> some text here</div>
<div class="box"> more and more <br> text here</div>
<div class="box"> even more <br> and more <br> text here</div>Curve bottom side of the div to the inside with CSS
Simply use border-radius and rely on some overflow. You can also consider pseudo element to avoid extra markup:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
height: 80px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -25px;
background: #fff;
}<div class="container">
</div>Pure CSS tag div, with rounded triangle pointer
you can use clip-path for the shape, an SVG filter for the rounded corner (adjust the stdDeviation to control the radius) and a gradient coloration for the dot:
.box {
display: inline-block;
filter: url('#goo');
}
.box div {
margin: 10px;
padding: 20px 40px 20px 20px;
font-size: 35px;
font-weight: bold;
font-family: sans-serif;
color:#fff;
transform-origin: right center;
transform:rotate(-45deg);
background:
radial-gradient(8px at calc(100% - 20px) 50%,#fff 99%,transparent),/* the dot */
linear-gradient(60deg,red,orange); /* gradient coloration */
clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%);
}<div class="box">
<div>SALE</div>
</div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>How to make a curved edge hexagon by using CSS
I think you are looking for this.
.hex {
position: relative;
margin: 1em auto;
width: 10em;
height: 17.32em;
border-radius: 1em/.5em;
background: orange;
transition: opacity .5s;
}
.hex:before,
.hex:after {
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
}
.hex:before {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.hex:after {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}<div class="hex"></div>Curved css boxes
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>How can I create an inset curved background that works with a background gradient and overlapping transparent shapes?
Here is how I would attempt it. It will probably take a bit of finessing to make it work for your site, but hopefully you can see the technique I used.
Basically you are using divs as the background to content and translating them to overlay. Then putting any content in a container that you can change the z-index on to bring above everything else. The curve itself is just a border-radius of 50% and skewed wider than tall. Then the content's parent div has the gradient color background.
I do like the simplicity of Temani's solution though.
/* top ellipse */
.top {
border-radius: 50%;
width: 150%;
height: 200px;
transform: translate(-15%, 20%);
background: white;
}
/* content's parent container */
.mid {
padding: 4rem;
background: linear-gradient(-20deg, #3adecf, #3ae3c5);
}
.content {
position: relative;
z-index: 20;
color: white;
font-size: 30px;
}
/* bottom ellipse */
.bottom {
border-radius: 50%;
width: 200%;
height: 200px;
transform: translate(-25%, -20%);
background: white;
}
.all {
overflow-y: hidden;
position: relative;
}
.t-circle {
background: #00ccdd;
position: absolute;
top: 5%;
right: -200px;
z-index: 10;
width: 400px;
height: 400px;
border-radius: 50%;
opacity: 0.2;
pointer-events: none;
}<div class="all">
<div class="top">Top</div>
<div class="mid">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien mauris, efficitur in nisi vel, gravida mollis urna. Praesent ac sem vitae neque pretium ultricies. Vestibulum id mattis neque. Nullam ultricies neque eget metus volutpat, et tempus magna commodo. Phasellus accumsan lacus nibh, at commodo elit pellentesque at. Morbi iaculis bibendum massa, sit amet accumsan felis ullamcorper a. Praesent luctus odio vel tortor finibus feugiat. Sed luctus finibus nisl, in pellentesque orci efficitur ut. Curabitur suscipit elementum aliquam. Sed vel convallis urna.
<br><br>
Phasellus porttitor blandit ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam elementum rhoncus diam ac rhoncus. Nunc sed lorem porttitor, placerat sem vitae, bibendum nunc. Ut dolor mi, condimentum vitae leo in, suscipit maximus risus. Morbi consequat dui eros, sit amet dapibus urna porta tempor. Fusce mollis a velit nec auctor. Donec semper elementum feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque vel turpis pellentesque, ultricies metus blandit, interdum nibh. Duis malesuada dolor lacus, quis tempor erat elementum in. Pellentesque at consequat nisl. Vestibulum vel urna nec ipsum interdum pellentesque id nec magna. Mauris eu lectus posuere, aliquet justo id, pharetra nisl.
</div>
</div>
<div class="bottom">bottom</div>
<div class="t-circle"></div>
</div>Button border radius and cursor
It's not actually "broken", since it's the way it's supposed to work, so you can't really fix it, all elements render as rectangles in the browser (if you inspect the round button, you'll see it covers a rectangular area)
You can either (as @Greg pointed out) use the <area> tag, or you can use JavaScript to do the following:
- If outside the circle coords, show a regular mouse icon; If inside, show a pointer
- If outside the circle coords, return false in the onclick method; If inside, return true.
Related Topics
Double Dotted Border While Using Colspan
Removing Border Style Changes Page Layout
Remove Value Attribute of Input Element Using CSS Only
Animating a CSS Gradient Background on the Hover Event
HTML Generated Microsoft Word Document with Header, Footer and Watermark
Percentage Height Not Working in Nested Flexbox Layout in Chrome
Target Safari CSS, But Not Chrome
How to Make Sure That My Footer Shows All the Way at End of the Page Rather Than in the Middle
Html/CSS Hack to Allow Overflow-X: Auto & Overflow-Y: Visible
Setting Width:Auto Leads to Width:100%
Why Is a Div Longer Than Several Spans with the Same Content (Only in Chrome)
Twitter Bootstrap Select Arrow Missing
How to Make <Legend> Text Wrap