CSS到底創建色彩和右箭頭矩形

.some_class { 
 
    padding: 2px 10px 2px 10px; 
 
    margin: 1px; border: 1px solid grey; 
 
    display: inline-block; 
 
    } 
 

 
.text-grey { 
 
    background-color: grey; 
 
    border: 1px solid grey; 
 
    margin: 1px; width: 20px 20px 20px 20px; 
 
    }

<ul> 
 
<li><a href="..\html\index.html"><span class="some_class">HOME </span></a> <span class="glyphicon glyphicon-arrow-right text-grey" > </span> </li> 
 

 
</ul>

如何創建CSS放置文本與部分填充顏色，右箭頭所示this image

來源

2017-03-06 mechrule

這是我曾嘗試到目前爲止

HOME<跨度類= 「glyphicon glyphicon右箭頭文本灰色」>

和我的css代碼：span { padding：2px 10px 2px 10px; margin：1px; 邊框：1px純灰色; display：inline-block; } 。文字灰色{ \t background-color：gray; \t border：1px solid gray; \t margin：1px; \t width：20px 20px 20px 20px; } – mechrule

你正在開始正確的軌道，但你需要確保下次發佈你的代碼在這個問題:) – scoopzilla

對於箭頭，你可以使用→ - UTF-8右箭頭。 – SamJakob

這可能是開頭：

.button { 
    border: 1px solid blue 
} 
.button:after { 
    display: block; 
    background: url(arrow.png) 
}

來源

2017-03-06 18:22:29 Paflow

到最好的辦法是通過CSS，使用按鈕：{ 後內容： '代碼';}。你可以使用fontawesome，或類似的東西（這是如果你使用wordpress）。如果你製作自己的代碼比你可以使用任何一種或類似的東西。

來源

2017-03-06 18:56:36 Korovjov

檢查此fiddle ..根據需要更改顏色。

.a-btn{ 
 
    background: linear-gradient(top, #feda71 0%,#febb4a 100%); 
 
\t border: 1px solid #f5b74e; 
 
    border-color: #f5b74e #e5a73e #d6982f; 
 
    box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395; 
 
    padding: 0px 80px 0px 10px; 
 
\t height: 38px; 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t border-radius: 4px; 
 
\t float: left; 
 
\t margin: 10px; 
 
\t overflow: hidden; 
 
\t transition: all 0.3s linear; 
 
} 
 
.a-btn-text{ 
 
\t padding-top: 5px; 
 
\t display: block; 
 
\t font-size: 18px; 
 
\t white-space: nowrap; 
 
\t color: #996633; 
 
    text-shadow: 0 1px 0 #fedd9b; 
 
\t transition: all 0.3s linear; 
 
} 
 
.a-btn-slide-text{ 
 
\t position:absolute; 
 
\t top: 35px; 
 
\t left: 0px; 
 
\t width: auto; 
 
\t right: 52px; 
 
\t height: 0px; 
 
\t background: #fff; 
 
\t color: #996633; 
 
\t font-size: 13px; 
 
\t white-space: nowrap; 
 
\t font-family: Georgia, serif; 
 
\t font-style: italic; 
 
\t text-indent: 15px; 
 
\t overflow: hidden; 
 
\t line-height: 30px; 
 
\t box-shadow: 
 
\t \t -1px 0px 1px rgba(255,255,255,0.4), 
 
\t \t 1px 1px 1px rgba(0,0,0,0.5) inset; 
 
\t transition: height 0.3s linear; 
 
} 
 
.a-btn-icon-right{ 
 
\t position: absolute; 
 
\t right: 0px; 
 
\t top: 0px; 
 
\t height: 100%; 
 
\t width: 52px; 
 
\t border-left: 1px solid #f5b74e; 
 
\t box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; 
 
} 
 
.a-btn-icon-right span{ 
 
\t width: 38px; 
 
\t height: 38px; 
 
\t opacity: 0.7; 
 
\t position: absolute; 
 
\t left: 50%; 
 
\t top: 50%; 
 
\t margin: -20px 0px 0px -20px; 
 
\t background: transparent url("http://www.pdfonline.com/images/icon-arrow-right.png") no-repeat 10% 45%; 
 
    transition: all 0.3s linear; 
 
    background-size: 40px 30px; 
 
} 
 

 
.a-btn:active { 
 
\t position:relative; 
 
\t top:1px; 
 
\t background: linear-gradient(top, #fec354 0%,#fecd61 100%); /* W3C */ 
 
    border-color: #d29a3a #cc9436 #c89133; 
 
    text-shadow: 0 1px 0 #fee1a0; 
 
    box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e; 
 
}

<a href="#" class="a-btn"> 
 
\t <span class="a-btn-text">Register now</span> 
 
\t <span class="a-btn-icon-right"><span></span></span> 
 
</a>

來源

2017-03-06 19:05:09

ayyy毆打它：P（儘管我的配色方案:)） – SamJakob

非常複雜 –

這會幫助你到達那裏。因爲它可能是一個角色，所以不需要將右箭頭當成圖像。

<html> 
<head> 
<style> 
body { 
    background: black 
} 
ul, li { 
    list-style-type: none; 
} 
.some_class { 
    font-family: monospace; 
    border: 1px solid #00e5ee; 
    color: #00e5ee; 
    background: black; 
    text-decoration: none; 
} 
.some_class span { 
    padding: 0px 12px; 
} 
.rightArrow { 
    color: white !important; 
    background: #00e5ee !important; 
    padding: 0px 6px; 
    font-weight: bold; 
} 
</style> 
</head> 
<body> 
<ul> 
<li><a href="..\html\index.html" class="some_class"><span>HOME</span><span class="rightArrow">&#8594;</span></a></span></li> 
</ul> 
</body> 
</html>

來源

2017-03-06 19:06:18 GlennFriesen

在這裏你去，玩得開心（我現在評論它解釋的代碼）：

https://jsfiddle.net/MasterDoctor/rcc37dbr/1/

HTML：

<nav class="fancynav"> 
    <ul> 
    <li><a href="#" class="arrow-link">Home</a></li> 
    <li><a href="#" class="arrow-link">About</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</nav>

CSS：

body { 
    /* Set body background (duh!) */ 
    background-color: #000; 
} 

nav.fancynav ul { 
    /* Style navbar list */ 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 

nav.fancynav ul li { 
    /* Remove bullet points */ 
    list-style-type: none; 
    float: left; 
    margin-left: 10px; 
} 

nav.fancynav ul li a { 
    color: #3F51B5; 
    line-height: 24px; 
    text-decoration: none; 
    font-family: "Verdana"; 
    font-size: 12px; 
    text-transform: uppercase; 
    transition: border-bottom 0.15s; 
    border-bottom: 1px solid rgba(0,0,0,0); 
} 

nav.fancynav ul li a:hover:not(.arrow-link) { 
    border-bottom: 1px solid #3F51B5; 
} 

nav.fancynav ul li a.arrow-link { 
    /* Style the main link as a block, with uppercase letters, Verdana font, blue color, no margin or padding, some left and vertical padding and a nice CSS transition. */ 
    font-family: "Verdana"; 
    display: inline-block; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: #3F51B5; 
    border: 1px solid #3F51B5; 
    padding: 0px; 
    margin: 0px; 
    height: 24px; 
    padding-left: 5px; 
    font-size: 12px; 
    transition: background-color 0.15s, color 0.15s; 
} 

nav.fancynav ul li a.arrow-link:hover { 
    /* Modify the color and background on hover */ 
    color: white; 
    background-color: #3F51B5; 
} 

nav.fancynav ul li a.arrow-link:after { 
    /* This is for styling the arrow, make it a block (but inline), the right background color, set the line height to make the arrow vertically centered, add some margin for spacing and finally set the color of the arrow. */ 
    content: "\2192"; 
    display: inline-block; 
    background-color: #3F51B5; 
    padding: 0px; 
    margin: 0px; 
    height: 24px; 
    line-height: 24px; 
    padding: 0px 5px; 
    margin-left: 5px; 
    color: white; 
}

編輯＃1 ：對不起，我知道發佈已完成的代碼是不受歡迎的，但我拖延了一些討厭的後端工作（和家庭作業）。

編輯＃2：三角形，你可以使用CSS（https://css-tricks.com/snippets/css/css-triangle/），也可以使用UTF-8符號（https://www.w3schools.com/charsets/ref_utf_arrows.asp）

來源

2017-03-06 19:09:07 SamJakob

我可以使用僞元素建議最簡單的，像這樣的

body { 
 
    background: black; 
 
} 
 
a { 
 
    display: inline-block; 
 
    color: #099; 
 
    font-weight: bold; 
 
    padding-left: 10px; 
 
    border: 1px solid #099; 
 
    text-decoration: none; 
 
} 
 

 
a::after { 
 
    content: '\2192'; 
 
    font-size: 20px; 
 
    background: #099; 
 
    color: white; 
 
    margin-left: 10px; 
 
    padding: 2px 10px 2px 10px; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
}

<ul> 
 
    <li> <a href="..\html\index.html">HOME</a> </li> 
 
</ul>

來源

2017-03-06 19:18:19 LGSon

我想過這個，但是我聽說在某個地方，包含UTF-8字符而不使用HTML編碼是一個壞主意（即'→' ），並且編碼似乎在僞元素中不起作用，所以我只是使用了「span」。 – SamJakob

@SamMearns當你想要編碼'\ 2192'時，你可以這樣使用它......更新我的答案 – LGSon

Touché：P我也會更新我的代碼。 – SamJakob

CSS到底創建色彩和右箭頭矩形

回答

相關問題