<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Etiquetas!</title>
<style>
*{ margin: 0px;
padding: 0px;
}
#contenedor{
width: 700px;
height:800px;
background-color: silver;
margin: auto;
}
#texto{
float: left;
position: relative;
width: 200px;
margin-top: 30px;
padding: 15px;
font-weight: bold;
text-align: center;
background-color: tomato;
margin-left: -20px;
font-size: 20px;
box-shadow: 1px 1px 3px black;
}
#forma{
position: absolute;
width: 0px;
height: 0px;
line-height: 0px;
border-left: 20px solid transparent;
border-top: 10px solid black;
top: 100%;
left: 0px;
}
#texto2{
float: right;
position: relative;
width: 250px;
margin-top: 15%;
padding: 15px;
font-weight: bold;
text-align: center;
background-color: teal;
margin-right: -20px;
font-size: 20px;
color: white;
box-shadow: 1px 1px 3px black;
}
#forma2{
position: absolute;
width: 0px;
height: 0px;
line-height: 0px;
border-right: 20px solid transparent;
border-top: 10px solid black;
top: 100%;
right: 0px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="texto">Ultimas Noticias!<span id="forma"></span></div>
<div id="texto2">Luis Miguel Alvarado!<span id="forma2"></span></div>
</div>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: Versión 1 (4)