block with arrow transitition

by Vladislav Altyncev

HTML

<div class="viewport">
    <div class="solution_card">
        <a class="solution_card-pic" href="#" style="height:40px;">img</a>
        <div class="solution_card-area">
            <p class="solution_card-text">Готовый интернет-магазин шин и дисков</p>
        </div>
    </div>
</div>

CSS

.viewport {
	border-left: 1px solid #e6d5b6;
	border-top: 1px solid #e6d5b6;
	box-shadow: inset 1px 1px 0 #efddbf;
	position: relative;
	font-size: 14px;
	line-height: 18px;
	cursor: default;
	background: none;

	width: 33.3%;
  float: left;

  vertical-align: top;
}
.solution_card {
	margin: 16px;
	position: relative;
	z-index: 4;
	color: #2f2f2f;
	box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.07);
	-webkit-transition: box-shadow .3s ease;
  -moz-transition: box-shadow .3s ease;
  -ms-transition: box-shadow .3s ease;
  -o-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
}
	.solution_card:hover {
		box-shadow: 1px 1px 17px 0px rgba(0, 0, 0, 0.17);
	}
.solution_card .solution_card-pic {
	width: 100%;
	margin: 0 0 11px;
	display: block;
	position: relative;
}
.solution_card .solution_card-pic img {
	width: 100%;
	display: block;
}
.solution_card .solution_card-area {
	/* min-height: 190px; */
	padding: 13px;
	margin: -13px 0 0 0;
	position: relative;
	background: #fff;
	-webkit-transition: background .3s ease;
  -moz-transition: background .3s ease;
  -ms-transition: background .3s ease;
  -o-transition: background .3s ease;
  transition: background .3s ease;
}
	.solution_card:hover .solution_card-area {
		background: #ffcb0f -webkit-linear-gradient(#ffcb0f 0%, #ffc810 100%);
		background: #ffcb0f -o-linear-gradient(#ffcb0f 0%, #ffc810 100%);
		background: #ffcb0f linear-gradient(#ffcb0f 0%, #ffc810 100%);
	}
.solution_card .solution_card-area:before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7px 8px 7px;
	border-color: transparent transparent #fff transparent;
	margin-left: -7px;
	content: " ";
	display: block;
	position: absolute;
	top: -8px;
	left: 50%;
	/* -webkit-transition: border-bottom-color .1s ease;
	  -moz-transition: border-bottom-color .1s ease;
	  -ms-transition: border-bottom-color .1s ease;
	  -o-transition: border-bottom-color .1s ease;
	  transition: border-bottom-color .1s ease; */
}
	.solution_card:hover...