div with right arrow - html

Question

I have this div:
I need css that do exacly that, the div and the arrow to the right like that.
Alos, i need a random text (length is changing, and we are talking responsive) in it and i want the text always to be in the middle of things... what is the best way to do so?

Answer 1

Here's a great generator to get you started and then you can customize it a little more to get your desired result
http://cssarrowplease.com/
To get something similar to what you showed, try
.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>
And on your arrow box, using bootstrap or whatever grid system you are using, attach the sizing for responsiveness.

Answer 2

Example 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;
border-left: 10px solid green;
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
transform: translate(0,-50%);
}
<div class="block">
Block
</div>
Example 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 3

Something like this,
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 4

Please try this
.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>