web-dev-qa-db-ja.com

Divの下部にある中央の三角形

私はヒーローの一番下に三角形/矢印を配置しようとしていますが、反応が悪く、三角形が右に浮いており、完全に中央に配置されていないため、モバイルではうまく動作しません。

常に三角形をdivの下部の絶対中心に配置する方法はありますか？

ここにサンプルコード：

http://jsfiddle.net/SxKr5/1/

HTML：

<div class="hero"></div>

CSS：

.hero {     
    position:relative;
    background-color:#e15915;
    height:320px !important;
    width:100% !important;


}


.hero:after,
.hero:after {
    z-index: -1;
    position: absolute;
    top: 98.1%;
    left: 70%;
    margin-left: -25%;
    content: '';
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}
csshtml5css3css-shapes
50
Miura-shi

leftを50%に設定してから、margin-leftを-25pxに設定して、その幅を考慮することはできません： http://jsfiddle.net/ 9AbYc /

.hero:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

または、可変幅が必要な場合は、以下を使用できます。 http://jsfiddle.net/9AbYc/1/

.hero:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}
108
Ben Jackson

次のcssを使用して、position: absoluteでスタイル設定された要素を中央揃えにすることができます。

.element {
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
}

CSSがleft: 50%のみを持つ場合、次の効果があります。

Image with left: 50% property only

left: 50%をtransform: translate(-50%)と組み合わせると、次のようになります。

Image with transform: translate(-50%) as well

.hero {       
  background-color: #e15915;
  position: relative;
  height: 320px;
  width: 100%;
}


.hero:after {
  border-right: solid 50px transparent;
  border-left: solid 50px transparent;
  border-top: solid 50px #e15915;
  transform: translateX(-50%);
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 50%;
  height: 0;
  width: 0;
}
<div class="hero">

</div>
17
Mohammad Usman

これをチェックして：

http://jsfiddle.net/SxKr5/3/ （

.hero1
{
    width: 90%;
    height: 200px;
    margin: auto;
    background-color: #e15915;
}

.hero2
{
    width: 0px;
    height: 0px;
    border-style: solid;
    margin: auto;
    border-width: 90px 58px 0 58px;
    border-color: #e15915 transparent transparent transparent;
    line-height: 0px;
    _border-color: #e15915 #000000 #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000')
}
6
Hasan Alaca

また、負のマージンまたは変換プロパティを使用する代わりに、CSS「calc」を使用して同じ効果を得ることができます（これらのプロパティを他のプロパティに使用する場合）。

.hero:after,
.hero:after {
    z-index: -1;
    position: absolute;
    top: 98.1%;
    left: calc(50% - 25px);
    content: '';
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}
1
Josh Jennings