de-vraag
Lebih
Question

Pusat Segitiga di Bawah Div

Saya mencoba untuk memiliki sebuah segitiga/panah di bagian bawah pahlawan saya tapi itu tidak responsif dan tidak't bekerja pada ponsel sangat baik sebagai segitiga mengapung ke kanan dan tidak benar-benar terpusat lagi.

Bagaimana aku bisa menjaga segitiga, terletak di absolute center di bawah div setiap saat?

Contoh kode berikut:

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;
}
web-tiki
web-tiki
Pertanyaan edit 20 Desember 2014 в 5:59
Pemrograman
html5
css3
css
css-shapes
Solution / Answer

Bisa't anda hanya mengatur kiri untuk 50% dan kemudian margin-left set -25px untuk account untuk itu's lebar: 

.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;
}

atau jika anda membutuhkan sebuah variabel lebar anda bisa menggunakan:

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;
}
Ben Jackson
Ben Jackson
Jawaban edit 21 Juni 2014 в 9:49
112

Anda dapat menggunakan css berikut untuk membuat elemen tengah sejajar ditata dengan posisi: absolut:

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

Dengan CSS hanya memiliki left: 50% kami akan memiliki efek berikut:

Gambar dengan left: 50% properti hanya

Sementara menggabungkan left: 50% dengan transform: translate(-50%) kita akan memiliki berikut ini:

Gambar dengan transform: translate(-50%) serta

.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>
18

Cek ini:

.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

Anda juga bisa menggunakan CSS "calc" untuk mendapatkan efek yang sama, bukan menggunakan marjin negatif atau mengubah sifat (dalam kasus anda ingin menggunakan properti-properti untuk hal lain).

.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

Aku tahu ini isn't jawaban langsung untuk pertanyaan anda, tapi anda juga bisa mempertimbangkan untuk menggunakan clip-path, seperti dalam pertanyaan ini: https://stackoverflow.com/a/18208889/23341.

0
Related communities 5
HTML dan CSS Indonesia
4 118 pengguna
Silahkan bertanya terkait mengenai HTML maupun CSS. Membaca, menulis, berbagi. Baca dahulu pesan tersemat di pinned post.
Pemrograman Web Indonesia (HTML CSS Javascript PHP MySQL)
306 pengguna
Official Website : www.pemweb.id Belajar Pemrograman Web (HTML CSS Javascript PHP MySQL) Grup Belajar Pemrograman Web. HTML + PHP + Javascript + MySQL DB Semoga menjadi forum belajar, menambah wawasan, peningkatan mutu personal kita semua.
HTML INDONESIA
109 pengguna
PHP HTML Indonesia
59 pengguna
~ Menerima Jasa Pembuatan Website untuk : Tugas & Instansi 💻 ~ Forum Diskusi Belajar Bersama ✅ ~ Promosi Jasa Minimal 1x Sehari ✅ ~ Dilarang Berbicara Kotor 🚫 ^ Other Grup : Whatsapp Group : Chat Admin untuk masuk ke Grup Whatsapp ^^
Css Indonesia
19 pengguna
Css Indonesia group ini membahas tentang Css dan web design Bagi yg mau memperdalam Css atau ingin memulai Css atau bahkan Javascript dan html, bisa download aplikasi di bawah ini : https://play.google.com/store/apps/details?id=com.sololearn Thank you