I am trying to design a shape using only CSS (no images) that is the opposite of a heart shape. It's a bit hard to explain, so here is a visual representation:
The blue represents the background, but the shape I am aiming for is not a heart, it is actually the shape of the black rectangle.
If I had a shape similar to this (THE GRAY SECTION NOT THE BLACK)
I could duplicate it and rotate it to achieve the desired shape.
If you're in a hurry, you can skip to the ready-to-use demo at the end of this post :)
The top left and top right curved corners are achieved by applying box-shadow along with border-radius set to 50% on pseudo elements - .heart:before and .heart:after. They form two crescent shapes as shown below:
The angled heart shape is created using box-shadow on .heart element. When combined with the circular shapes, it gives the appearance of a heart:
To fill in the empty spaces, we use pseudo elements of the .shape-box container - .shape-box:before and .shape-box:after. The excess part is clipped neatly using overflow: hidden on the .shape-box. When integrated with the above pieces, it creates this design:
When all the elements are put together, it results in a heart shape cut-out contained within .shape-box.
body {
background: #00A2F6;
}
.shape-box {
height: 504px;
width: 504px;
position: relative;
margin: 100px;
overflow: hidden;
}
.shape-box:before,
.shape-box:after {
content: '';
display: block;
height: 100px;
width: 120px;
background: #2B2B2B;
transform: rotate(45deg);
left: 190px;
position: absolute;
top: 40px;
}
.shape-box:after {
width: 760px;
height: 750px;
box-shadow: inset 0 0 0 220px #2B2B2B;
top: -150px;
left: -130px;
background: none;
}
.heart {
transform: rotate(45deg);
height: 357px;
width: 356px;
box-shadow: inset 0 0 0 50px #2B2B2B;
position: absolute;
left: 74px;
top: 34px;
}
.heart:before,
.heart:after {
content: '';
display: block;
width: 151px;
height: 151px;
border-radius: 50%;
box-shadow: -40px -15px 0 20px #2B2B2B;
position: absolute;
left: 50px;
top: 157px;
}
.heart:after {
box-shadow: -15px -40px 0 21px #2B2B2B;
left: 156px;
top: 51px;
}<div class="shape-box">
<div class="heart"></div>
</div>To achieve this effect, you can utilize svg gradients, multiple backgrounds, and some creative tiling and placement techniques. Here is a snippet of CSS from a functioning jsfiddle (excluding vendor prefixes like -webkit and -moz):
height: 400px;
width: 400px;
background-image:
radial-gradient(75% 85.5%, circle, transparent 25%, black 26%),
radial-gradient(25% 85.5%, circle, transparent 25%, black 26%),
linear-gradient(225deg, transparent 25%, black 25%),
linear-gradient(135deg, transparent 25%, black 25%);
background-size: 200px 200px;
background-position: top left, top right, bottom left, bottom right;
background-repeat: no-repeat;
This code creates a heart-shaped cutout in the center of a 400px square element, which can be adjusted to fit any size element.
Update: For a more intricate design, check out this enhanced jsfiddle that uses six gradients instead of four for a visually appealing result.
After studying Mark Hubbart's work, I was inspired to take it to the next level in this fiddle.
Although it's not yet fully complete and requires some adjustments for different browsers using media queries, it marks the beginning of a more adaptable approach towards achieving the same objective.
#backgrounder {
z-index: 2;
background-image:
radial-gradient(68% 100%, circle, transparent 48%, white 30%),
radial-gradient(32% 100%, circle, transparent 48%, white 30%),
radial-gradient(110% 1%, circle, transparent 65%, white 30%),
radial-gradient(-8.5% 1%, circle, transparent 65%, white 30%),
linear-gradient(220deg, transparent 41%, white 30%),
linear-gradient(139deg, transparent 41%, white 30%);
background-image:
-webkit-radial-gradient(68% 100%, circle, transparent 48%, white 30%),
-webkit-radial-gradient(32% 100%, circle, transparent 48%, white 30%),
-webkit-radial-gradient(110% 1%, circle, transparent 65%, white 30%),
-webkit-radial-gradient(-8.5% 1%, circle, transparent 65%, white 30%),
linear-gradient(220deg, transparent 41%, white 30%),
linear-gradient(139deg, transparent 41%, white 30%);
background-size: 51% 31%, 50% 31%, 51% 50%, 50% 50%, 51% 51%, 50% 51%;
background-position: top left, top right, 0% 30%, 100% 30%, bottom left, bottom right;
background-repeat: no-repeat;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
My goal is to achieve a navigation bar similar to the one shown in this image: Using Bootstrap 3, the code below is what I have implemented for my navigation: <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <di ...
I am currently working on designing a toolbar using Material and Angular2. My main challenge is formatting the toolbar in such a way that the search bar appears centered in white, while the "Create Project" button and other buttons are aligned to the right ...
Here is the scenario: <div class="parent"> <div class="sizer" /> <div class="child" /> </div> .sizer { width: 200px; } .child { position: relative; width: 400px; } I am facing restrictions - I cannot explicitly set the width ...
<footer> <div class="copyrights-left"> <p>© 2015. <a style="color: #fff;" href="index.html">Free Xbox Live Gold Membership and Free Xbox Live Gold Codes</a>. All rights reserved.</p></div> <div class="co ...
I have a relatively simple React component that I'm working on. Even though I am quite new to React, I have tried various methods to eliminate the white space issue but so far have been unsuccessful in determining what is causing it. Negative margin s ...
I'm experimenting with adding a linear gradient to SVG text, but I'm struggling to specify the fill color in the text class. I came across an example online and decided to try it out, but when I entered the fill color for the text (in the sfp2 cl ...
I found this awesome website that explains how to create an animated bar graph using HTML, CSS, and JQuery. I want to implement it in my web application to display monthly statistics for each of the 7 divisions in my company. However, I'm having troub ...
I am currently utilizing Framework7 and Cordova wrapper for my IOS application and I am facing an issue with the dragging effect in my content. Even after attempting to disable the pull-to-refresh effect from the Cordova side, the content remains draggabl ...
I am populating the data dynamically. However, the Accordion feature is not functioning correctly. JSFiddle link http://jsfiddle.net/aff4vL5g/360/ Please note: I am unable to modify the HTML structure. Current table Desired output The first accordio ...
Is it feasible to apply the h1 style to all text within a div without utilizing tags? For instance: <div id="title-div" style="h1">My Title</div> Or a potential solution could be: #title-div { style: h1; //Imports all s ...
Currently, I am in the process of designing a website and have implemented a Bootstrap navbar. The navbar consists of three icons aligned to the right, and I am looking to center another element. However, when I use mx-auto, the element does not center per ...
Is it possible to change multiple CSS attributes of an element with just one line of code? Currently, if I want to alter various CSS attributes of an element, I have to write separate lines of code for each attribute. For instance: $("div#start").cli ...
The dropdown-item in my code, taken from the Bootstrap site, is not working properly. The toggle displays but the item does not. What could be causing the Bootstrap dropdown component to malfunction in the browser? Are there any issues with my CDNs? ...
Chat App Development In my current project, I am developing a chat application using React. The app consists of a list (ul element) that displays messages through individual items (li elements). However, I have encountered an issue where the ul element st ...
I have been utilizing the freewall jQuery plugin for organizing images in my website. While the layout of my first section, located at , is functioning properly, I am encountering some issues with its height. The code snippet that I am currently using is a ...
I'm struggling with formatting my HTML form to have two text fields on the same line instead of stacked vertically. In the example below, I want the Size, Width, and Height fields to be aligned horizontally rather than one below the other. <form c ...
As a newcomer to CSS grid, I am struggling to understand how to prevent components from overflowing a grid. The section in question, with the class name of profile-widget-wrapper, is defined with grid-row:2/4 but is overflowing the grid. Can anyone provide ...
I am struggling to display an X icon next to a tab on my page when the tab is clicked, but I am facing difficulties in toggling its visibility. The issue arises when trying to access the span element within the tabs. $('.tabs .tab-links a').on(& ...
Could use some assistance with looping this gradient smoothly over the text without any annoying jumps appearing during the animation. Is there a way to achieve a seamless movement across the text? Any suggestions on how to approach this? Here is a liv ...
Having trouble getting my buttons centered and aligned side by side on the screen. I've managed to achieve one or the other but not both simultaneously. Currently, the buttons are next to each other but positioned at the top left corner of the screen. ...