さて、ここでは、ページの一番下に表示される効果を、上から順にボタンを使って再現しようとしています。http://www.ppp-templates.de/tilability/ - 私たちのコンテンツエリアが接続された後。白いbg画像を持つdivの透明な背景を持つCSSの三角形を作成しますか？
彼は基本的に彼の背景イメージを使用しています。私はCSSでそれを複製して同じ効果を維持したいと思います。
私は背景画像を削除し、私は国境をCSSで三角形を作成する方法を知っているが、私の場合、私は国境に
を使用することはできませんので、透明BGのイメージではなく色を使用したいのですがすべてのdivで#FFFを使用していたので、今はすべて白です...上のボタンを追加して背景を追加した新しいdivを作成しました。透明ですので、CSSで三角形を作成するにはどうすればいいですか？ ？
ご協力いただきまして誠にありがとうございます。
ザ・フィドル：
HTML：
<div class="bar">
<span class="home">^<br>Home, sweet home!</span>
</div>
CSS：
ここ.bar {
position: relative;
width: 90%;
height: 30px;
margin: 0 auto;
}
.home {
position: absolute;
top: 0px;
left: 60%;
width: 20%;
text-align: center;
}
.bar:before, .bar:after {
content:'';
position: absolute;
top: 0;
height: 0;
border-top: 30px solid white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.bar:before {
left: 0;
width: 70%;
border-right: 30px solid transparent;
}
.bar:after {
right:0;
width: 30%;
border-left: 30px solid transparent;
}
これは素晴らしい応答です。可能であれば、これがなぜ機能するかについて、いくつかの注釈を付けてください。私は多くの推論を推論することができますが、まだ私には謎のものがいくつかあります。 –
あなたが行く、http://jsfiddle.net/pkUx7/1/
HTML私は一緒にこれを投げた
body {
background-color: purple;
}
div {
margin:0;
padding:0;
background-color: violet;
}
#footer {
height: 100px;
}
#bottom-line-left, #bottom-line-right {
display: inline-block;
height: 20px;
}
#bottom-line-left {
width: 61%;
}
#bottom-line-right {
float: right;
width: 37%;
}
#triangle {
margin-left:-6px;
margin-right: -4px;
padding:0;
display: inline-block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid purple;
}
<body>
<div id = "footer"></div>
<div id = "bottom-line-left"></div>
<div id = "triangle"></div>
<div id = "bottom-line-right"></div>
</body>
CSSは、おそらくこの効果を達成するためのより良い方法があります。
HTML
<div class="div1">Lorem Ipsum</div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
CSS
body {
background-color: gray;
border: 20px solid gray;
}
.div1 {
background-color: white;
border: 20px solid white;
}
.div2 {
float: right;
border-top: 20px solid white;
border-right: 20px solid white;
border-left: 20px solid transparent;
}
.div3 {
float: right;
margin: 10px -20px;
border-bottom: 20px solid white;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}
.div4 {
border-top: 20px solid white;
border-right: 20px solid transparent;
margin-right: 40px;
}
はそれhereを参照してください。
ここではかなり最小限のマークアップとCSSで三角形を作るための一つの方法です：
HTML：
<div class="triangle"></div>
はCSS：あなたは、ベクターを使用することができます
.triangle {
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 35px solid gray;
}
このプロパティを試すことができます。-webkit-background-clip：text; 色：rgba（0、0、0、0）; – eveevans
関連：http://stackoverflow.com/questions/23758922/transparent-arrow-triangle –