Сделать треугольник CSS с прозрачным фоном на div с белым изображением bg?

Хорошо, я пытаюсь воспроизвести эффект, который вы видите здесь, внизу страницы, с помощью кнопки «назад вверх»: http://www.ppp-templates.de/tilability/ - после области содержания для "Мы остаемся на связи".

в основном он использует для этого фоновое изображение, и я хотел бы воспроизвести его с помощью CSS и сохранить тот же эффект.

Я знаю, как создавать треугольники с помощью CSS с границами, но в моем случае я хотел бы использовать прозрачное изображение bg, а не цвет, поэтому я не могу использовать границы

Я удалил фоновое изображение и использовал #FFF для всего div, так что теперь он весь белый ... Я создал новый div, в котором я добавил кнопку back to top и добавил background: transparent для него, чтобы он был прозрачным, но как это сделать Создаю треугольник с помощью CSS?

Любая помощь приветствуется.


html css css-shapes
person FinalDestiny    schedule 07.07.2012    source источник
comment
Вы можете попробовать использовать следующие свойства: -webkit-background-clip: text; цвет: rgba (0, 0, 0, 0);   -  person eveevans    schedule 08.07.2012
comment
связанные: stackoverflow.com/questions/23758922/transparent-arrow-triangle   -  person web-tiki    schedule 08.12.2014

Ответы (5)


arrow_upward
9
arrow_downward

Скрипка:

http://jsfiddle.net/JaMH9/2/

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;
}
​
person biziclop    schedule 07.07.2012
comment
Это отличный ответ. Пожалуйста, по возможности, сделайте несколько заметок о том, почему это работает. Я могу сделать вывод о многих рассуждениях, но некоторые вещи все еще остаются для меня загадкой. - person Cosmin Atanasiu; 26.02.2014

arrow_upward
3
arrow_downward

Вот один из способов сделать треугольник с минимальной разметкой и 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;
}

http://jsbin.com/iribib/21

person DA.    schedule 08.07.2012

arrow_upward
2
arrow_downward

Вот и все, http://jsfiddle.net/pkUx7/1/

HTML

<body>
    <div id = "footer"></div>
    <div id = "bottom-line-left"></div>
    <div id = "triangle"></div>
    <div id = "bottom-line-right"></div>
</body>

CSS

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;
}
person abhshkdz    schedule 07.07.2012

arrow_upward
2
arrow_downward

Я просто собрал это вместе, наверное, есть лучший способ добиться такого эффекта.

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

См. Его здесь.

person Neil    schedule 07.07.2012

arrow_upward
0
arrow_downward

Вы можете использовать векторный путь. Например, прозрачный треугольник с зеленой рамкой:

<svg height="151" width="150">
    <path d="m0 150 h150 l -75 -150 z" fill="transparent" stroke="green" />
</svg>

См. Его здесь.

person Alexandr Tishko    schedule 24.06.2014