ДИВ с правой стрелкой

Question

У меня есть этот DIV:

мне нужно CSS, что делать exacly это, ДИВ и стрелка вправо, как это. Алос, мне нужен случайный текст (длина меняется, и мы говорим отзывчиво) в нем, и я хочу, чтобы текст всегда был в центре вещей ... что это лучший способ сделать это?

Answer 1

Что-то вроде этого,

Reference

<style> 

    .arrow-right { 
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 

    border-left: 60px solid green; 
} 
</style> 

<div class="arrow-right"></div> 

Answer 2

Вот большой генератор, чтобы вы начали, а затем вы можете настроить его немного больше, чтобы получить желаемый результат

http://cssarrowplease.com/

Чтобы получить что-то похожее на то, что вы показали, попробуйте

.arrow_box { 
 
    position: relative; 
 
    background: #3abc3d; 
 
    min-height: 80px; 
 
    border-radius: 10px; 
 
    padding: 20px; 
 
} 
 
.arrow_box:after { 
 
    left: 100%; 
 
    top: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    border-color: rgba(58, 188, 61, 0); 
 
    border-left-color: #3abc3d; 
 
    border-width: 20px; 
 
    margin-top: -20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="col-xs-5 col-sm-4 col-md-4 col-lg-2"> 
 
    <div class="arrow_box"> 
 
    Message for everything 
 
    </div> 
 

 
</div>

И на вашем поле со стрелкой, с помощью начальной загрузки или любой другой системы вы используете сетку, присоедините проклейки за отзывчивость.

Answer 3

Пример 1

.block { 
 
    background: green; 
 
    border-radius: 10px; 
 
    padding: 20px; 
 
    position: relative; 
 
    color: #fff; 
 
    max-width: 200px; 
 
    margin: 0 auto; 
 
} 
 
.block:after { 
 
    content: ''; 
 
    position: absolute; right: -20px; top: 50%; 
 
    border: 10px solid transparent; \t 
 
    border-left: 10px solid green; 
 
    -webkit-transform: translate(0,-50%); 
 
    -ms-transform: translate(0,-50%); 
 
     transform: translate(0,-50%); 
 
    }

<div class="block"> 
 
    Block 
 
</div>

Пример 2

.block { 
 
    background: green; 
 
    border-radius: 10px; 
 
    padding: 20px; 
 
    position: relative; 
 
    color: #fff; 
 
    max-width: 200px; 
 
    margin: 0 auto; 
 
} 
 
.block:after{ 
 
    content: ''; 
 
    position: absolute; right: -10px; top: 50%; 
 
    background: green;  
 
    width: 20px; height: 20px; 
 
    margin-top: -10px;  
 
    transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
}

<div class="block"> 
 
    Block 
 
</div>

Answer 4

Пожалуйста, попробуйте это

.box { 
 
    width: 200px; 
 
    padding: 10px; 
 
    background: green; 
 
    border-radius: 5px; 
 
    position: relative; 
 
} 
 
.box p { 
 
    margin: 0; 
 
    color: #fff; 
 
} 
 
.box::after { 
 
    position: absolute; 
 
    content: ""; 
 
    border-style: solid; 
 
    border-width: 20px; 
 
    border-color: transparent transparent transparent green; 
 
    left: 100%; 
 
    top: 50%; 
 
    margin-top: -20px; 
 
}

<div class="box"> 
 
    <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in fermentum risus. Donec malesuada, risus id vulputate varius, diam enim elementum sem.</p> 
 
</div>