manoelneto/transparent-arrow.html

## transparent-arrow.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <style>
        body {
            background: black;
        }

        .section {
            width: 100%;
            height: 200px;
            background: white;
            position: relative;
        }

        .seta-wrapper {
            position: absolute;
            bottom: 100%;
            height: 10px;
            overflow: hidden;
            width: 100%;
        }

        .tile {
            width: 60%;
            position: absolute;
            top: 0;
            height: inherit;
            background: green;
        }

        .tile:before {
            content: '';
            display: block;
            width: 0;
            height: 0;
            top: 0;
            position: absolute;
            border-style: solid;
        }

        .left {
            right: 50%;
            margin-right: 10px;
        }

        .left:before {
            border-color: transparent transparent transparent red;
            border-width: 10px 0 0px 10px;
            left: 100%;
        }

        .right {
            left: 50%;
            margin-left: 10px;
        }

        .right:before {
            border-color: transparent red transparent transparent;
            border-width: 10px 10px 0px 0;
            right: 100%;
        }

        img {
            width: 100%;
            display: block;
        }
    </style>
    <img src="http://placehold.it/700x300" alt="">
    <div class="section">
        <div class="seta-wrapper">
            <div class="tile right"></div>
            <div class="tile left"></div>
        </div>
    </div>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>

	<style>
	body {
	background: black;
	}

	.section {
	width: 100%;
	height: 200px;
	background: white;
	position: relative;
	}

	.seta-wrapper {
	position: absolute;
	bottom: 100%;
	height: 10px;
	overflow: hidden;
	width: 100%;
	}

	.tile {
	width: 60%;
	position: absolute;
	top: 0;
	height: inherit;
	background: green;
	}

	.tile:before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	top: 0;
	position: absolute;
	border-style: solid;
	}

	.left {
	right: 50%;
	margin-right: 10px;
	}

	.left:before {
	border-color: transparent transparent transparent red;
	border-width: 10px 0 0px 10px;
	left: 100%;
	}

	.right {
	left: 50%;
	margin-left: 10px;
	}

	.right:before {
	border-color: transparent red transparent transparent;
	border-width: 10px 10px 0px 0;
	right: 100%;
	}

	img {
	width: 100%;
	display: block;
	}
	</style>
	<img src="http://placehold.it/700x300" alt="">
	<div class="section">
	<div class="seta-wrapper">
	<div class="tile right"></div>
	<div class="tile left"></div>
	</div>
	</div>

	</body>
	</html>