web-dev-qa-db-ja.com

CSSでXを描く

オレンジ色の正方形のようなdivがあります

enter image description here

どういうわけかこのdivに白いXを描きたいので、

enter image description here

とにかくCSSでこれを行うには、Photoshopでこれを描いてdiv背景として画像を使用する方が簡単でしょうか？ divコードは次のようになります

div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
}
htmlcssdrawcss-shapes
42
natsuki_2002

Xの文字をdiv内のHTMLに入れてから、cssでスタイルを設定できます。

JSFiddleを参照してください： http://jsfiddle.net/uSwbN/

HTML：

<div id="orangeBox">
  <span id="x">X</span>
</div>

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;
}
11
AT92

クロスマークと呼ばれるエンティティが必要です。

http://www.fileformat.info/info/unicode/char/274c/index.htm

そのコードは&#10060;で、❌のように表示されます

次のように、完全に中央に配置された十字マークが必要な場合：

cross mark demo

次の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;
}

デモフィドルを参照

クロスブラウザの問題

SafariまたはChromeでは、クロスマークエンティティは表示されません。ただし、Firefoxでも同じエンティティ、IEおよびOpera。

小さいが似たような形の乗算記号エンティティ&#xd7;を使用しても安全です。

74
Marc Audet

単一要素ソリューション：enter image description here

body{
    background:blue;
}

div{
    width:40px;
    height:40px;
    background-color:red;
    position:relative;
    border-radius:6px;
    box-shadow:2px 2px 4px 0 white;
}

div:before,div:after{
    content:'';
    position:absolute;
    width:36px;
    height:4px;
    background-color:white;
    border-radius:2px;
    top:16px;
    box-shadow:0 0 2px 0 #ccc;
}

div:before{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg);
    left:2px;
}
div:after{
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
    right:2px;
}
<div></div>
56
Gildas.Tambo

さらに別の試み...これは×を使用しています。このページの例の多くは、ボックスとしてのみ表示されますが、&times;作品

HTML

<div class="close"></div>

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

15
Gray

さらに別の純粋なCSSソリューション（すなわち、画像、文字、または追加のフォントを使用せず）に基づいて、 @ Bansoaが答えです = 's answer 。

私はそれを単純化し、応答性を高めるために少しの Flexbox マジックを追加しました。

この例のcrossは、正方形のコンテナーに自動的に拡大縮小し、その線の太さを変更するには、単にheight: 4px;（クロスを本当に反応させるには、heightをパーセントまたは他の相対単位で設定することができます）。

div {
    position: relative;
    height: 200px; /* this can be anything */
    width: 200px;  /* ...but maintain 1:1 aspect ratio */
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid pink;
}

div::before,
div::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 4px; /* cross thickness */
    background-color: black;
}

div::before {
    transform: rotate(45deg);
}

div::after {
    transform: rotate(-45deg);
}
<div></div>
12
TranslucentCloud

CSSプロパティ「content」を使用できます。

div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
}

div:after {
    content: "X";
    font-size: 2em; 
    color: #FFF;
}

このように： http://jsfiddle.net/HKtFV/

9
António Regadas
#x{
    width: 20px;
    height: 20px;
    background-color:orange;
    position:relative;
    border-radius:2px;
}
#x::after,#x::before{
    position:absolute;
    top:9px;
    left:0px;
    content:'';
    display:block;
    width:20px;
    height:2px;
    background-color:red;
    
}
#x::after{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#x::before{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
<div id=x>
</div>
8
user669677

CSSグラデーションでかなり素敵なXを作成できます。

screenshot

デモ： https://codepen.io/JasonWoof/pen/rZyRKR

コード：

<span class="close-x"></span>
<style>
    .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%);
    }
</style>
5
JasonWoof

「x」をスタイリングすることでこれを行うことができます

text-align: center;
font-size: 120px;
line-height: 100px;
color: white;
font-family: monospace;

http://jsfiddle.net/Ncvyj/1/

4
Explosion Pills

この質問が大好きです！以下のコードをオレンジ色の正方形の白い×に簡単に変更できます。

enter image description here

ここでデモフィドル

SCSSは次のとおりです（簡単に CSSに変換されます ）。

$pFontSize: 18px;
p {
  font-size: $pFontSize;
}
span{
  font-weight: bold;
}
.x-overlay,
.x-emoji-overlay {
  position: relative;
}

.x-overlay,
.x-emoji-overlay {
  &: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;
  &::before,
  &::after {
    content: '';
    width: 110%;
    position: absolute;
    left: -2px;
    top: 45%;
    opacity: 0.7;
  }
  &::before {
    border-bottom: 2px solid red;
    -webkit-transform: skewY(-20deg);
    transform: skewY(-20deg);
  }
  &::after {
    border-bottom: 2px solid red;
    -webkit-transform: skewY(20deg);
    transform: skewY(20deg);
  }
}
3
Ryan

[〜＃〜] html [〜＃〜]

<div class="close-orange"></div>

[〜＃〜] 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/

1
Dennis Sørensen