Boxes with css arrows

Developer
Size
3,121 Kb
Views
8,096

How do I make an boxes with css arrows?

What is a boxes with css arrows? How do you make a boxes with css arrows? This script and codes were developed by Josep Llodrà on 19 January 2023, Thursday.

Boxes with css arrows Previews

Boxes with css arrows - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Boxes with css arrows</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="arrow_box"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<div class="arrow_box2"> Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
</div>
<div class="arrow_minimal">
A sentence is a grammatical unit consisting of one or more words that are grammatically linked. A sentence can include words grouped meaningfully to express a statement, question, exclamation, request, command or suggestion.[1]
</div>
</body>
</html>

Boxes with css arrows - Script Codes CSS Codes

html { font-family: 'HelveticaNeue-Light', sans-serif; font-size: 14px; color: white; text-shadow: 1px 1px 1px #303030; text-align: justify;
}
.arrow_box {	position: relative;	background: #88b7d5;	border: 10px solid #c2e1f5; padding: 36px 36px 48px 36px;
}
.arrow_box:after, .arrow_box:before {	top: 100%;	border: solid transparent;	content: " ";	height: 0;	width: 0;	position: absolute;	pointer-events: none;
}
.arrow_box:after {	border-color: rgba(136, 183, 213, 0);	border-bottom-color: #88b7d5;	border-bottom-color: white; border-width: 36px; left: 50%; margin-top: -58px;	margin-left: -36px;
}
.arrow_box:before {	border-color: rgba(194, 225, 245, 0);	border-bottom-color: #c2e1f5;	border-width: 36px;	left: 50%; margin-top: -72px; margin-left: -36px;
}
.arrow_box2 { margin-top: 8px;	position: relative;	background: #16a085;	border: 10px solid #1abc9c; padding: 36px 36px 48px 36px; margin-bottom: 10px;
}
.arrow_box2:after, .arrow_box2:before {	bottom: 100%;	border: solid transparent;	content: " ";	height: 0;	width: 0;	position: absolute;	pointer-events: none;
}
.arrow_box2:after {	border-bottom-color: #16a085;	border-width: 30px;	left: 50%; margin-top: -0px;	margin-left: -30px;
}
.arrow_box2:before {	border-bottom-color: #1abc9c;	border-width: 43px;	left: 50%;	margin-left: -43px;
}
.arrow_minimal { display: inline-block; width: 180px;	position: relative;	background: #2980b9; padding: 12px 12px 32px 12px; color: #A6CADF; color: #111; text-shadow: 1px 1px 1px #cdcdcd;
background: linear-gradient(to bottom, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(219,220,213,1) 100%); /* W3C */
}
.arrow_minimal:after {	top: 100%;	border: solid transparent;	content: " ";	height: 0;	width: 0;	position: absolute;	pointer-events: none;
}
.arrow_minimal:after {	border-color: rgba(136, 183, 213, 0);	border-bottom-color: white; border-width: 16px; left: 25%; margin-top: -32px;	margin-left: -36px;
}
Boxes with css arrows - Script Codes
Boxes with css arrows - Script Codes
Home Page Home
Developer Josep Llodrà
Username jllodra
Uploaded January 19, 2023
Rating 3
Size 3,121 Kb
Views 8,096
Do you need developer help for Boxes with css arrows?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josep Llodrà (jllodra) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!