Рисование треугольника над div в CSS

-1

Я на самом деле пытаюсь реализовать проект, сделанный для меня в HTML5 и CSS3, с помощью Twitter Bootstrap.Рисование треугольника над div в CSS

У меня есть боковая панель слева от экрана со списком внутри, ничего сложного.

<html> 
<section class="sidebar"> 
    <ul class="sidebar-menu"> 
     <li class="active"> 
      <a href="/home"> 
       <i class="fa fa-users active-fa"></i> 
       <span class="menu-title">MY USERS</span> 
      </a> 
     </li> 
    </ul> 
</section> 
</html>

Я хотел бы прийти к такому результату:

Любая идея о коде CSS для управления иметь этот треугольник на правой стороне с центром в середине правом нижнем углу?

источник

2017-02-14 Zero

Почему вы используете перечисленные ниже пункты? почему бы не divs? – Nofel

У вас есть css? – andreas

': after' в разделе сделают. – Roberrrt

Вы можете достичь этого треугольника с псевдо элемента ::after, некоторые positioning и transforming:

li { 
 
    position: relative; 
 
    display: block; 
 
    background: #04a4a9; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
} 
 
li a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
li::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 15px; 
 
    height: 15px; 
 
    background: white; 
 
    right: -8px; 
 
    top: 50%; 
 
    transform: translate(0, -50%) rotate(45deg); 
 
}

<section class="sidebar"> 
 
    <ul class="sidebar-menu"> 
 
    <li class="active"> 
 
     <a href="/home"> 
 
     <i class="fa fa-users active-fa"></i> 
 
     <span class="menu-title">MY USERS</span> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</section>

источник

2017-02-14 15:14:01 andreas

Это исключает половину белого куба на выходе из кнопки. Вы забыли переполнение. – snkv

ты избил меня. хорошая работа вокруг !. – Nofel

@Sqnkov вы правы, обновил мой ответ! – andreas

Вы можете достичь этого, используя CSS pseudo elements:

Для средний подъязычная тратить время с самим треугольником, просто использоватьgenerator.

.btn { 
 
    display: flex; 
 
    align-items: center; 
 
    align-content: center; 
 
    justify-content: center; 
 
    background: #53BED1; 
 
    color: #fff; 
 
    width: 400px; 
 
    height: 150px; 
 
    position: relative; 
 
} 
 

 
.btn::before { 
 
    right: 0; 
 
    top: 40%; 
 
    position: absolute; 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 15px 20px 15px 0; 
 
    border-color: transparent #ffffff transparent transparent; 
 
}

<div class="btn">My users</div>

источник

2017-02-14 15:14:15 snkv

Вы действительно можете использовать псевдо.

Вы также можете нарисовать background-color из li из этого псевдоопределения через box-shadow, поэтому треугольник является полупрозрачным.

Вы можете использовать color на li легко изменить BG-цвет, так как вы сбрасываете цвет на <a>, box-shadow цвета наследует color значения (currentcolor), если он не установлен в правиле (так же border-color) ..

li { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
    color:tomato; 
 
    text-shadow:1px 1px black; 
 
} 
 
li:nth-child(even) { 
 
    color:turquoise 
 
    } 
 
li.active { 
 
    color: #04a4a9; 
 
    } 
 
li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
li::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width:0px; 
 
    height: 15px; 
 
    margin: -8px; 
 
    right: 0; 
 
    top: 50%; 
 
    transform: rotate(45deg); 
 
    box-shadow: 0 0 0 400px; 
 
} 
 
li.active::after { 
 
    width:15px;; 
 
} 
 

 
/*demo to check if you can see through */ 
 
body { 
 
    background:linear-gradient(45deg,gray,yellow,pink,blue,gray,yellow,pink,blue,gray,yellow,pink,blue,gray,yellow,pink,blue);

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<section class="sidebar"> 
 
    <ul class="sidebar-menu"> 
 
    <li> 
 
     <a href="/home"> 
 
     <i class="fa fa-users active-fa"></i> 
 
     <span class="menu-title">MY USERS</span> 
 
     </a> 
 
    </li> 
 
    <li class="active"> 
 
     <a href="/home"> 
 
     <i class="fa fa-users active-fa"></i> 
 
     <span class="menu-title">MY USERS</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="/home"> 
 
     <i class="fa fa-users active-fa"></i> 
 
     <span class="menu-title">MY USERS</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="/home"> 
 
     <i class="fa fa-users active-fa"></i> 
 
     <span class="menu-title">MY USERS</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="/home"> 
 
     <i class="fa fa-users active-fa"></i> 
 
     <span class="menu-title">MY USERS</span> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</section>

источник

2017-02-14 15:48:57

Рисование треугольника над div в CSS

ответ

Смежные вопросы