76

JSFiddle

そのリンクの X のようなものを純粋な css で作成する方法はありますか?

ここに画像の説明を入力

4

11 に答える 11

139

私はこれに必要以上の時間を費やしましたが、明らかな理由で IE でテストしていません。とは言っても、ほとんど同じです。

http://jsfiddle.net/adzFe/14/

a.boxclose{
    float:right;
    margin-top:-30px;
    margin-right:-30px;
    cursor:pointer;
    color: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
    background: #605F61;
    font-size: 31px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 11px 3px;       
}

.boxclose:before {
    content: "×";
}
于 2012-04-04T22:10:30.940 に答える
42

閉じるアイコンの試み、テキストなし

.close-icon
{
  display:block;
  box-sizing:border-box;
  width:20px;
  height:20px;
  border-width:3px;
  border-style: solid;
  border-color:red;
  border-radius:100%;
  background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%);
  background-color:red;
  box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
}
<a href="#" class="close-icon"></a>

于 2013-11-22T07:56:23.550 に答える
9

基本的な考え方: a.boxclose の場合:

border-radius: 40px;
width:20px;
height 10px;
background-color: #c0c0c0;
border: 1px solid black;
color: white;
padding-left: 10px;
padding-top: 4px;

クローズ ボックスの内容に「X」を追加します。

http://jsfiddle.net/adzFe/1/

速くて汚いですが、機能します。

于 2012-04-04T21:57:45.933 に答える
6

こんにちはあなたは純粋なCSSでこのコードを使うことができます

このように

css

.arrow {
cursor: pointer;
color: white;
border: 1px solid #AEAEAE;
border-radius: 30px;
background: #605F61;
font-size: 31px;
font-weight: bold;
display: inline-block;
line-height: 0px;
padding: 11px 3px;
}
.arrow:before{
 content: "×";
}

HTML

<a href="#" class="arrow"> 
</a>

ライブデモhttp://jsfiddle.net/rohitazad/VzZhU/

于 2012-04-05T06:25:31.280 に答える
5

編集：あなたが持っているものと一致するようにcssを更新しました..

デモ

HTML

<div>
    <span class="close-btn"><a href="#">X</a></span>
</div>

CSS

.close-btn {
    border: 2px solid #c2c2c2;
    position: relative;
    padding: 1px 5px;
    top: -20px;
    background-color: #605F61;
    left: 198px;
    border-radius: 20px;
}

.close-btn a {
    font-size: 15px;
    font-weight: bold;
    color: white;
    text-decoration: none;
}
于 2012-04-04T21:58:52.177 に答える
2

ここでがっかりするのは、「X」が透明ではないことです (これは、少なくとも PNG を作成する方法です)。

この簡単なテストをまとめました。 http://jsfiddle.net/UM3a2/22/embedded/result/これにより、負のスペースを透明のままにして、正のスペースに色を付けることができます。これは完全に境界線で構成されているため、境界線の色がデフォルトでテキストの色に設定されているため、簡単に色を付けることができます。

IE 8 以前を完全にはサポートしていませんが (境界半径の問題)、かなり適切に正方形に劣化します (正方形の閉じるボタンで問題ない場合)。

また、セレクターごとに 2 つの疑似要素しか許可されていないため、2 つの HTML 要素が必要です。これをどこで学んだか正確にはわかりませんが、Chris Coyier の記事にあったと思います。

<div id="close" class="arrow-t-b">
  Close
  <div class="arrow-l-r"> </div>
</div>

#close {
  border-width: 4px;
  border-style: solid;
  border-radius: 100%;
  color: #333;
  height: 12px;
  margin:auto;
  position: relative;
  text-indent: -9999px;
  width: 12px;
}
#close:hover {
  color: #39F;
}
.arrow-t-b:after,
.arrow-t-b:before,
.arrow-l-r:after, 
.arrow-l-r:before {
  border-color: transparent;
  border-style: solid;
  border-width: 4px;
  content: "";
  left: 2px;
  top: 0px;
  position: absolute;
}
.arrow-t-b:after {
  border-top-color: inherit;
}
.arrow-l-r:after {
  border-right-color: inherit;
  left: 4px;
  top: 2px;
}
.arrow-t-b:before {
  border-bottom-color: inherit;
  bottom: 0;
}
.arrow-l-r:before {
  border-left-color: inherit;
  left: 0;
  top: 2px;
}
于 2013-04-25T23:25:16.817 に答える
1

ちょっと考えてみてください-IE7をターゲットにしていない場合は、base64でエンコードされ、 css に埋め込まれた画像を回避できます。あなたの目標は、実際にCSSボタンを独自の目標として作成するのではなく、不要なhttpリクエストを回避することだと思います。

于 2012-04-05T07:21:56.063 に答える
0

「x」の文字を含まない純粋なCSSが必要な場合...

CSSで作成された円の中に「x」を含むいくつかの素晴らしい実験的なアイコンがあります：http：//nicolasgallagher.com/pure-css-gui-icons/demo/

于 2012-04-05T00:11:22.117 に答える
0

私はそれが最高だと思います！

そして、これを機能させるためにThe Simple JSを使用してください。

<script>
function privacypolicy(){
    var privacypolicy1 = document.getElementById('privacypolicy');
    var privacypolicy2 = ('display: inline;');
    privacypolicy1.style= privacypolicy2;
}
function hideprivacypolicy(){
    var privacypolicy1 = document.getElementById('privacypolicy');
    var privacypolicy2 = ('display: none;');
    privacypolicy1.style= privacypolicy2;
}
</script>
<style type="text/css">
            .orthi-textlightbox-background{
                background-color: rgba(30, 23, 23, 0.82);
                font-family: siyam rupali; 
                position: fixed; top:0px; 
                bottom:0px; 
                right:0px; 
                width: 100%; 
                border: none; 
                margin:0; 
                padding:0; 
                overflow: hidden; 
                z-index:999999; 
                height: 100%;
                }

                .orthi-textlightbox-area {
                background-color: #fff;
                position: absolute;
                width: 50%;
                left: 300px;
                top: 200px;
                padding: 20px 10px;
                border-radius: 6px;
                }
                .orthi-textlightbox-area-close{
                font-weight: bold;
                background-color:black;
                color: white;
                border-radius: 50%;
                padding: 10px;
                float: right;
                border: 1px solid black;
                box-shadow: 0 0 10px 0 rgba(33, 157, 216, 0.82);
                margin-top:-30px;
                margin-right:-30px;
                cursor:pointer;
                }
</style>
<button onclick="privacypolicy()">Show Content</button>
<div id="privacypolicy" class="orthi-textlightbox-background" style="display:none;">
<div class="orthi-textlightbox-area">
LOL<button class="orthi-textlightbox-area-close" onclick="hideprivacypolicy()">×</button>
</div>
</div>
于 2016-07-02T08:34:49.660 に答える