Creating an error icon using only CSS, identical to the one shown in the picture

Question

Creating an error icon using only CSS, identical to the one shown in the picture

I'm attempting to create a similar X icon, resembling the one shown here:

Here is the HTML code I am using:

<div class='error-circle'>
    <div>X</div>
</div>

And this is the corresponding CSS:

.error-circle{
    width: 70px;
    height: 70px;
    background: #990000;
    border-radius: 100px;
    border: 4px solid white;
    color: white;
    font-size: 45px;
    font-weight: bold;
    padding-left: 17px;
}

Although it's close, I really need the same result as the image (without the background). I believe the X should not be the x character but rather two lines crossed on top of each other. How can I achieve this desired outcome?

html css css-shapes

Answer 1

Answer №1

1) Eliminate any extra padding

2) Set the border-radius to 50%

3) Experiment with a different typeface such as verdana

View Example on FIDDLE

.error-circle {
  width: 70px;
  height: 70px;
  line-height: 70px;
  background: #990000;
  border-radius: 50%;
  border: 4px solid white;
  color: white;
  font-size: 45px;
  font-family: verdana;
  text-align: center;
}

<div class='error-circle'>
  <div>X</div>
</div>

Answer 2

1) Eliminate any extra padding

2) Set the border-radius to 50%

3) Experiment with a different typeface such as verdana

View Example on FIDDLE

.error-circle {
  width: 70px;
  height: 70px;
  line-height: 70px;
  background: #990000;
  border-radius: 50%;
  border: 4px solid white;
  color: white;
  font-size: 45px;
  font-family: verdana;
  text-align: center;
}

<div class='error-circle'>
  <div>X</div>
</div>

Answer 3

Answer №2

If you're aiming for a more realistic look, consider adding some shadows to your design

*{box-sizing: border-box}
:root{background: #ccc}
div{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    margin: 40px auto;
    box-shadow: 0 0 0 10px white, 0 0 24px 12px #B3B3B3, inset 0 0 16px 1px #B3B3B3;
}

div:before, div:after{
    content: ''; 
    position:absolute;
    width: 20px;
    height: 100px;
    left: 64px;
    top: 25px;
    box-shadow: 0 0 16px 1px #B3B3B3;
    background: white
}
div:before{
    transform: skew(28deg)
}
div:after{
    transform: skew(-28deg);
}

<div/>

For a different effect, try changing the background color to red

*{box-sizing: border-box}
:root{background: #ccc}
div{
    background: red;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    margin: 40px auto;
    box-shadow: 0 0 0 10px white, 0 0 24px 12px #B3B3B3, inset 0 0 16px 1px #B3B3B3;
}

div:before, div:after{
    content: ''; 
    position:absolute;
    width: 20px;
    height: 100px;
    left: 64px;
    top: 25px;
    box-shadow: 0 0 16px 1px #B3B3B3;
    background: white
}
div:before{
    transform: skew(28deg)
}
div:after{
    transform: skew(-28deg);
}

<div/>

To create variations in size, use transform: scale(.5,.5); on div

Answer 4

If you're aiming for a more realistic look, consider adding some shadows to your design

*{box-sizing: border-box}
:root{background: #ccc}
div{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    margin: 40px auto;
    box-shadow: 0 0 0 10px white, 0 0 24px 12px #B3B3B3, inset 0 0 16px 1px #B3B3B3;
}

div:before, div:after{
    content: ''; 
    position:absolute;
    width: 20px;
    height: 100px;
    left: 64px;
    top: 25px;
    box-shadow: 0 0 16px 1px #B3B3B3;
    background: white
}
div:before{
    transform: skew(28deg)
}
div:after{
    transform: skew(-28deg);
}

<div/>

For a different effect, try changing the background color to red

*{box-sizing: border-box}
:root{background: #ccc}
div{
    background: red;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    margin: 40px auto;
    box-shadow: 0 0 0 10px white, 0 0 24px 12px #B3B3B3, inset 0 0 16px 1px #B3B3B3;
}

div:before, div:after{
    content: ''; 
    position:absolute;
    width: 20px;
    height: 100px;
    left: 64px;
    top: 25px;
    box-shadow: 0 0 16px 1px #B3B3B3;
    background: white
}
div:before{
    transform: skew(28deg)
}
div:after{
    transform: skew(-28deg);
}

<div/>

To create variations in size, use transform: scale(.5,.5); on div

Answer 5

Answer №3

To create a circular shape, apply the border radius property as demonstrated below.

body { 
   background-color: #A5A5A5; /* used for visualizing the error icon */
   }

 #circlude {
   width: 100px;
   height: 100px;
   background-color: red;
   border-radius: 50%;
   color: white;
   font-weight: bold;
   text-align: center;
   font-size: 72px;
   font-family: calibri; /* Choose your preferred font */
   line-height: 100px;
   border: solid 4px white;
 }

<div id="circlude"> X </div><!-- End Circlude -->

Answer 6

To create a circular shape, apply the border radius property as demonstrated below.

body { 
   background-color: #A5A5A5; /* used for visualizing the error icon */
   }

 #circlude {
   width: 100px;
   height: 100px;
   background-color: red;
   border-radius: 50%;
   color: white;
   font-weight: bold;
   text-align: center;
   font-size: 72px;
   font-family: calibri; /* Choose your preferred font */
   line-height: 100px;
   border: solid 4px white;
 }

<div id="circlude"> X </div><!-- End Circlude -->

Answer 7

Answer №4

Check out this code snippet:

.error-circle {
  color: #000;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

Answer 8

Check out this code snippet:

.error-circle {
  color: #000;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

Answer 9

Answer №5

.error-circle{
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 40px;
    background-color: #990000;
    border: 5px solid #fff;
}

.error-circle > div {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -27px;
    text-align: center;
    width: 20px;
    font-size: 48px;
    font-weight: bold;
    color: #fff;
    font-family: Arial;
}

<div class='error-circle'>
    <div>X</div>
</div>

Answer 10

.error-circle{
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 40px;
    background-color: #990000;
    border: 5px solid #fff;
}

.error-circle > div {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -27px;
    text-align: center;
    width: 20px;
    font-size: 48px;
    font-weight: bold;
    color: #fff;
    font-family: Arial;
}

<div class='error-circle'>
    <div>X</div>
</div>

Answer 11

Answer №6

To create a button without using extra elements, I recommend utilizing pseudo effects with absolute positioning.

Exploring Pseudo Effects

By leveraging the :before and :after pseudo effects, you can achieve the desired button effect without the need for additional elements:

SEE LIVE DEMO

html{
background-color:gray;
}
.error-circle {
  width:70px;
position:relative;
  height: 70px;
  background: #990000;
  border-radius: 50%;
  border: 4px solid white;
}
.error-circle:after,.error-circle:before {
  position:absolute;
content:'';
width:10%;
left:45%;
top:10%;
height:80%;
background-color:white;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.error-circle:before{      
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

<div class='error-circle'>
  
</div>

Utilizing pseudo effects simplifies editing and maintenance:

Example 1 <-- highly recommended
Example 2

For cross compatibility, remember to include the -webkit- prefix to ensure Safari recognizes the rotation property.

Answer 12

To create a button without using extra elements, I recommend utilizing pseudo effects with absolute positioning.

Exploring Pseudo Effects

By leveraging the :before and :after pseudo effects, you can achieve the desired button effect without the need for additional elements:

SEE LIVE DEMO

html{
background-color:gray;
}
.error-circle {
  width:70px;
position:relative;
  height: 70px;
  background: #990000;
  border-radius: 50%;
  border: 4px solid white;
}
.error-circle:after,.error-circle:before {
  position:absolute;
content:'';
width:10%;
left:45%;
top:10%;
height:80%;
background-color:white;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.error-circle:before{      
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

<div class='error-circle'>
  
</div>

Utilizing pseudo effects simplifies editing and maintenance:

Example 1 <-- highly recommended
Example 2

For cross compatibility, remember to include the -webkit- prefix to ensure Safari recognizes the rotation property.

Answer 13

Answer №7

Focusing on the X with two cross lines, rather than solving the circle problem like other answers.

Here is a solution using two arrows:

body{padding:20px;}


#arrow-left{
  position: relative;
  padding: 30px;
}

#arrow-left:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: blue;
  -webkit-transform: skew(135deg, 0deg);
  -moz-transform: skew(135deg, 0deg);
  -ms-transform: skew(135deg, 0deg);
  -o-transform: skew(135deg, 0deg);
  transform: skew(135deg, 0deg);
}
#arrow-left:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 60%;
  height: 100%;
  width: 40%;
  background: blue;
  -webkit-transform: skew(-135deg, 0deg);
  -moz-transform: skew(-135deg, 0deg);
  -ms-transform: skew(-135deg, 0deg);
  -o-transform: skew(-135deg, 0deg);
  transform: skew(-135deg, 0deg);
}


#arrow-right{
  position: relative;
  padding: 30px;
}

#arrow-right:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(45deg, 0deg);
  -moz-transform: skew(45deg, 0deg);
  -ms-transform: skew(45deg, 0deg);
  -o-transform: skew(45deg, 0deg);
  transform: skew(45deg, 0deg);
}
#arrow-right:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 60%;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(-45deg, 0deg);
  -moz-transform: skew(-45deg, 0deg);
  -ms-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);
}

<span id="arrow-right"></span>
<span></span>
<span id="arrow-left"></span>

Answer 14

Focusing on the X with two cross lines, rather than solving the circle problem like other answers.

Here is a solution using two arrows:

body{padding:20px;}


#arrow-left{
  position: relative;
  padding: 30px;
}

#arrow-left:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: blue;
  -webkit-transform: skew(135deg, 0deg);
  -moz-transform: skew(135deg, 0deg);
  -ms-transform: skew(135deg, 0deg);
  -o-transform: skew(135deg, 0deg);
  transform: skew(135deg, 0deg);
}
#arrow-left:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 60%;
  height: 100%;
  width: 40%;
  background: blue;
  -webkit-transform: skew(-135deg, 0deg);
  -moz-transform: skew(-135deg, 0deg);
  -ms-transform: skew(-135deg, 0deg);
  -o-transform: skew(-135deg, 0deg);
  transform: skew(-135deg, 0deg);
}


#arrow-right{
  position: relative;
  padding: 30px;
}

#arrow-right:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(45deg, 0deg);
  -moz-transform: skew(45deg, 0deg);
  -ms-transform: skew(45deg, 0deg);
  -o-transform: skew(45deg, 0deg);
  transform: skew(45deg, 0deg);
}
#arrow-right:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 60%;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(-45deg, 0deg);
  -moz-transform: skew(-45deg, 0deg);
  -ms-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);
}

<span id="arrow-right"></span>
<span></span>
<span id="arrow-left"></span>

Answer 15

Answer №8

You have the option to utilize an svg format as well:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve"gt;
<title>icon / close / dark</title>
  <desc>Created with Sketch.</desc>
  <g id="icon-_x2F_-close-_x2F_-dark">
    <polygon id="icon-_x2F_-close" points="224.3,0 128,96.3 31.7,0 0,31.7 96.3,128 0,224.3 31.7,256 128,159.7 224.3,256 256,224.3 
        159.7,128 256,31.7  "/>
</g>
</svggt;

Answer 16

You have the option to utilize an svg format as well:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve"gt;
<title>icon / close / dark</title>
  <desc>Created with Sketch.</desc>
  <g id="icon-_x2F_-close-_x2F_-dark">
    <polygon id="icon-_x2F_-close" points="224.3,0 128,96.3 31.7,0 0,31.7 96.3,128 0,224.3 31.7,256 128,159.7 224.3,256 256,224.3 
        159.7,128 256,31.7  "/>
</g>
</svggt;

Creating an error icon using only CSS, identical to the one shown in the picture

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Exploring Pseudo Effects

Answer №7

Answer №8

Similar questions

Having trouble with applying a class in Gtk3 css?

data-abide is flagging all fields as incorrect

Changing Ionic Column Widths Based on Content Length

Data modifications in polymer are not being accurately displayed

Image hover effect displayed when hovering over an image

Achieving the Perfect Alignment: Displaying Text and Progress Bar Side by Side using Bootstrap 5

When I engage with the input field, it ceases to be in focus

Adjusting the width of titles in a CSS menu upon hover

When the content in one box exceeds the content in the other, one box is considered to be overfilled

Choose a specific option from the dropdown menu using a URL parameter

Maintain an equal distance between 2 out of 3 elements while resizing the window to ensure responsiveness

Issue: CSS breaking in Node.js Express app when navigating with multiple child paths or parameter paths in the route.Description: Encounter

Using Placeholder in JavaScript for Multiple Form Validations

User IDs should not be shown on the jQuery datatable, although they are still accessible

Updating dropdown selection with JavaScript

Reloading the same page with looping HTML forms through Ajax postback

The default margin of an HTML element is set to fill the width of its containing div and cannot be overridden

Can you trigger the playback of a sound file by clicking on a specific URL?

Having issues with Bootstrap 5 modal not functioning correctly?

Is it possible to modify the appearance of the element that was just clicked on?