Draw an X in CSS

Question

I ve got a div that looks like a orange square    I d like to draw a white X in this div somehow so that it looks more like    Anyway to do this in CSS or is it going to be easier to just draw this in Photoshop and use the image as the div background  The div code just looks like  div       height  100px      width  100px      background-color   FA6900      border-radius  5px

User · Answer

x000D   x000D   x  x000D      width  20px  x000D      height  20px  x000D      background-color orange  x000D      position relative  x000D      border-radius 2px  x000D    x000D   x  after  x  before  x000D      position absolute  x000D      top 9px  x000D      left 0px  x000D      content     x000D      display block  x000D      width 20px  x000D      height 2px  x000D      background-color red  x000D       x000D    x000D   x  after  x000D      -webkit-transform  rotate 45deg   x000D      -moz-transform  rotate 45deg   x000D      -ms-transform  rotate 45deg   x000D      -o-transform  rotate 45deg   x000D      transform  rotate 45deg   x000D    x000D   x  before  x000D      -webkit-transform  rotate -45deg   x000D      -moz-transform  rotate -45deg   x000D      -ms-transform  rotate -45deg   x000D      -o-transform  rotate -45deg   x000D      transform  rotate -45deg   x000D    x000D   lt div id x gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This is an adaptable version of the amazing solution provided by  Gildas Tambo elsewhere in this page  Simply change the values of the variables at the top to change the size of the  quot X quot   Credit for the solution itself goes to Gildas  All I ve done is given it adaptable math   x000D   x000D   root        Width and height of the box containing the  X       --BUTTON W              40px       This is the length of either of the 2 lines which form the  X   as a   percentage of the width of the button       --CLOSE X W             95        Thickness of the lines of the  X       --CLOSE X THICKNESS     4px        body      background blue     div      width            var --BUTTON W       height           var --BUTTON W       background-color red      position         relative      border-radius    6px      box-shadow       2px 2px 4px 0 white        The  X  in the button   before  and  after  each represent one of the two lines of the  X     div before div after      content                  position         absolute      width            var --CLOSE X W       height           var --CLOSE X THICKNESS       background-color white      border-radius    2px      top              calc 50  - var --CLOSE X THICKNESS    2       box-shadow       0 0 2px 0  ccc       One line of the  X     div before      -webkit-transform rotate 45deg       -moz-transform    rotate 45deg       transform         rotate 45deg       left              calc  100  - var --CLOSE X W     2        The other line of the  X     div after      -webkit-transform rotate -45deg       -moz-transform    rotate -45deg       transform         rotate -45deg       right             calc  100  - var --CLOSE X W     2     x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

HTML   lt div class  close-orange  gt  lt  div gt    CSS   close-orange     height  100px    width  100px    background-color   FA6900    border-radius  5px     close-orange before  close-orange after    content       position absolute    width  50px    height  4px    background-color white    border-radius 2px    top  55px     close-orange before    -webkit-transform rotate 45deg     -moz-transform rotate 45deg     transform rotate 45deg     left  32 5px     close-orange after    -webkit-transform rotate -45deg     -moz-transform rotate -45deg     transform rotate -45deg     left  32 5px      https   jsfiddle net cooperwebdesign dw4xd289

User · Answer

You can use the CSS property  content    div       height  100px      width  100px      background-color   FA6900      border-radius  5px     div after       content   X       font-size  2em       color   FFF      Like this  http   jsfiddle net HKtFV

User · Answer

I love this question  You could easily adapt my code below to be a white    on an orange square     Demo fiddle here  Here is the SCSS  which could easily be converted to CSS     pFontSize  18px  p     font-size   pFontSize    span    font-weight  bold     x-overlay   x-emoji-overlay     position  relative      x-overlay   x-emoji-overlay      amp  after       position  absolute      top  0      bottom  0      left  0      right  0      color  red      text-align  center          x-overlay after     content    d7     font-size  3    pFontSize    line-height   pFontSize    opacity  0 7      x-emoji-overlay after     content    274c     padding  3px    font-size  1 5    pFontSize    line-height   pFontSize    opacity  0 5      strike     position  relative    display  inline-block      strike  before     content        border-bottom  2px solid red    width  110     position  absolute    left  -2px    top  46       crossed-out       inspired by https   www tjvantoll com 2013 09 12 building-custom-text-strikethroughs-with-css      position  relative    display  inline-block     amp   before     amp   after       content          width  110       position  absolute      left  -2px      top  45       opacity  0 7         amp   before       border-bottom  2px solid red      -webkit-transform  skewY -20deg       transform  skewY -20deg          amp   after       border-bottom  2px solid red      -webkit-transform  skewY 20deg       transform  skewY 20deg

User · Answer

You can make a pretty nice X with CSS gradients     demo  https   codepen io JasonWoof pen rZyRKR  code    lt span class  close-x  gt  lt  span gt   lt style gt       close-x           display  inline-block          width  20px          height  20px          border  7px solid  f56b00          background              linear-gradient 45deg  rgba 0 0 0 0  0  rgba 0 0 0 0  43   fff 45   fff 55  rgba 0 0 0 0  57  rgba 0 0 0 0  100                linear-gradient 135deg   f56b00 0   f56b00 43   fff 45   fff 55   f56b00 57   f56b00 100           lt  style gt

User · Answer

Yet another attempt    this one uses  times   A lot of the examples on this page only show for me as a box  but  amp times  works  HTML   lt div class  close  gt  lt  div gt    CSS   close       height  100px      width  100px      background-color   FA6900      border-radius  5px     close after       position relative      content   d7       font-size 177px      color white      font-weight bold      top -53px      left -2px     JSFIDDLE

User · Answer

You could do this by styling an  x   text-align  center  font-size  120px  line-height  100px  color  white  font-family  monospace    http   jsfiddle net Ncvyj 1

User · Answer

You want an entity known as a cross mark   http   www fileformat info info unicode char 274c index htm  The code for it is  amp  10060  and it displays like   10060   If you want a perfectly centered cross mark  like this     try the following CSS   div       height  100px      width  100px      background-color   FA6900      border-radius  5px      position  relative     div after       position  absolute      top  0      bottom  0      left  0      right  0      content    274c      use the hex value here           font-size  50px       color   FFF      line-height  100px      text-align  center      See Demo Fiddle  Cross-Browser Issue  The cross-mark entity does not display with Safari or Chrome   However  the same entity displays well in Firefox  IE and Opera   It is safe to use the smaller but similarly shaped multiplication sign entity   amp  xd7  which displays as   xd7

User · Answer

You could just put the letter X in the HTML inside the div and then style it with css   See JSFiddle  http   jsfiddle net uSwbN   HTML    lt div id  orangeBox  gt     lt span id  x  gt X lt  span gt   lt  div gt    CSS    orangeBox     background   f90    color   fff    font-family   Helvetica    Arial   sans-serif    font-size  2em    font-weight  bold    text-align  center    width  40px    height  40px    border-radius  5px

User · Answer

single element solution    x000D   x000D  body  x000D      background blue  x000D    x000D   x000D  div  x000D      width 40px  x000D      height 40px  x000D      background-color red  x000D      position relative  x000D      border-radius 6px  x000D      box-shadow 2px 2px 4px 0 white  x000D    x000D   x000D  div before div after  x000D      content     x000D      position absolute  x000D      width 36px  x000D      height 4px  x000D      background-color white  x000D      border-radius 2px  x000D      top 16px  x000D      box-shadow 0 0 2px 0  ccc  x000D    x000D   x000D  div before  x000D      -webkit-transform rotate 45deg   x000D      -moz-transform rotate 45deg   x000D      transform rotate 45deg   x000D      left 2px  x000D    x000D  div after  x000D      -webkit-transform rotate -45deg   x000D      -moz-transform rotate -45deg   x000D      transform rotate -45deg   x000D      right 2px  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

Check  amp  and Cross    lt span class  act-html-check  gt  lt  span gt   lt span class  act-html-cross  gt  lt span class  act-html-cross  gt  lt  span gt  lt  span gt    lt style type  text css  gt  span act-html-check                   display  inline-block                  width  12px                  height  18px                  border  solid limegreen                  border-width  0 5px 5px 0                  transform  rotate  45deg                               span act-html-cross                   display  inline-block                  width  10px                  height  10px                  border  solid red                  border-width  0 5px 5px 0                  transform  rotate  45deg                   position  relative                             span act-html-cross  gt  span                     transform  rotate  -180deg                   position  absolute                  left  9px                  top  9px                 lt  style gt

User · Answer

Yet another pure CSS solution  i e  without the use of images  characters or additional fonts   based on  Bansoa is the answer s answer    I ve simplified it and added a bit of Flexbox magic to make it responsive   Cross in this example automatically scales to any square container  and to change the thickness of its lines one have just to tune height  4px   to make a cross truly responsive  you may want to set the height in percents or other relative units     x000D   x000D  div   x000D      position  relative  x000D      height  150px     this can be anything    x000D      width  150px         but maintain 1 1 aspect ratio    x000D      display  flex  x000D      flex-direction  column  x000D      justify-content  center  x000D      border  1px solid pink     not required  added for better visibility    x000D    x000D   x000D  div  before  x000D  div  after   x000D      position  absolute  x000D      content      x000D      width  100   x000D      height  4px     cross thickness    x000D      background-color  black  x000D    x000D   x000D  div  before   x000D      transform  rotate 45deg   x000D    x000D   x000D  div  after   x000D      transform  rotate -45deg   x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

[html] Draw an X in CSS

Examples related to html

Examples related to css

Examples related to draw

Examples related to css-shapes