CSS3：CSSのみで斜線背景を実装する

いままでは斜線背景を実装しようと思っても、画像に頼るしかありませんでした。が、CSS3っって本当に便利。斜線もlinear-gradientを使えば実装できちゃいます。

KEY SENTENCE

[1] 使用例

[2] 実装方法

[3] borderの代わりに

[1] 使用例

example.)

Basic example

[2] 実装方法

linear-gradientにtransparentを使えばあっという間に実装ができます。

HTMLとCSSをそれぞれ以下のように記述していきましょう。

HTML

<div class="stripe">Basic example</div>

CSS

.stripe {

	margin: 0;

	padding: 10px 20px;

	background-color: #53727d;

	background-image: -webkit-linear-gradient(-45deg, #455765 25%, transparent 25%, transparent 50%, #455765 50%, #455765 75%, transparent 75%, transparent);

	background-image: linear-gradient(-45deg, #455765 25%, transparent 25%, transparent 50%, #455765 50%, #455765 75%, transparent 75%, transparent);

	background-size: 20px 20px;/*数字を大きくすれば太く、小さくすれば細くなります。*/

	text-shadow:1px 1px 2px rgba(0,0,0,.3);

}

基本はたったこれだけです。是非実装してみてください。