Boxes with arrows css

CSS Message Box with Arrow Icon

A message box is a great way to interact with users on a webpage. It is used to notify the users about the action that he/she performs on a website. It can be an error, success, or an info message to guide the users. Mostly such messages are displayed in a popup box, but in some cases, it can be a static message box. In this tutorial, we’ll create a message box with an arrow icon using pure CSS.

As you have seen in the above image, this message box is just like a speech bubble that is displaying some text content. Actually, its an HTML div box that can show anything inside it. So, this arrow box can be used as a tooltip or in a tour guide message box.

The coding concept for this message box is really simple and straightforward. You just need to create a div element for a message box, then some CSS styles using CSS :before and :after pseudo-selector. So, let’s get started with HTML to build a message box.

The HTML Structure

First of all, create a div element with a class name “box” and add another class according to the position of the arrow. You can set the arrow to the top, left, right, or bottom of the message box. So, define the second class as “arrow-top” in order to display an arrow icon top of the message box.

 
This is some example text for your message.
 

Similarly, the other positions of the arrow icon can be shown by defining the classes like below:

 
This is a box with some content and an arrow at the top.
 
This is a box with some content and an arrow on the right.
 
This is a box with some content and an arrow at the bottom.
 
This is a box with some content and an arrow on the left.
 

You can place any HTML element inside a box, like buttons, images, or anything you want.

CSS Styles for Message Box with Arrow

Now, its time to style the message box using CSS. Target the “.box” selector and define the width, height background, etc. Here the important thing is position property that you need to keep relative. The other properties such as margin and padding can be defined according to your needs.

After that, leave some space on the top of the box by defining the margin-top property. Then, use the CSS after pseudo selector .arrow-top:after keep its content blank, define its position as absolute, and set border property as mentioned below:

.box.arrow-top < margin-top: 40px; >.box.arrow-top:after

In order to display the arrow to the right, define the CSS styles for the .arrow-right selector just like below snippet:

To display the arrow icon to the bottom of the box, just define none attribute for the border-bottom property.

Similarly, use the “none” for border-left to set the arrow icon to the left of the box. You can increase/decrease the thickness of the arrow by changing the values of the border that is 15px respectively.

Use the CSS media queries to make your message box responsive across various screen sizes.

@media only screen and (min-width:240px) and (max-width: 768px) < .box< display: block; float: none; margin: 40px auto; >>

That’s all! I hope, now you are able to create a message box with an arrow. If you have any questions or suggestions related to this message box, let me know by comment below.

Источник

63 CSS Arrows

Collection of free HTML and CSS arrow code examples from Codepen, GitHub and other resources: animated, back to top, scroll down, simple and for boxes. Update of October 2021. 4 new items.

Table of Contents

Animated Arrows

Author

Links

Made with

About a code

Smooth Arrow Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

The Arrow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Flipping Arrows

Flipping arrows made with css-doodle.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Awesome Arrow Icon

Animated awesome arrow icon with JS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About a code

Dashed Animated Arrow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Arrow @keyframes Animation

Using checkbox as the basis of the arrow state.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About a code

Arrow Animation Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Double Arrow Button

Animate an arrow button on click or hover.

Author

Links

Made with

About the code

Arrow animation

HTML and CSS arrow animation.

Author

Links

Made with

About the code

Arrow Animations

Sliding arrow css animations.

Author

Links

Made with

About the code

Arrow Hover Effect

Pure CSS arrow hover effect.

Author

Links

Made with

About the code

Animated CSS Arrows

Arrowed Link

Arrowed link — circle on hover (cf Google Home website).
Made by Alexandre Jolly
May 21, 2017

Triple Arrow Animation

SVG triple arrow animation.
Made by M-A Lavigne
May 5, 2017

Author

Links

Made with

About the code

Animated Arrow

Author

Links

Made with

About the code

Arrow animations

Some CSS only arrow animations that indicate state changes.

Author

Links

Made with

About the code

Animated Arrow Icon

Author

Links

Made with

About the code

Arrow animation

Author

Links

Made with

About the code

3 Arrows Animation

3 arrows animation with HTML, CSS and image.

Arrow Keyframes Animation

Arrow keyframes animation with HTML and CSS.
Made by Stephen Rodriguez
June 21, 2014

Arrow Icon Animation

Arrow icon animation with HTML and CSS.
Made by Bennett Feely
October 9, 2013

Author

Links

Made with

About a code

CSS Only Animated Arrow

Just example of making arrows only with CSS and animate it with CSS3.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Arrows Back To Top

3 HTML and CSS arrow back to top code examples.

Author

Links

Made with

About the code

Simple CSS Arrow

Simple pure CSS arrow button.

HTML And CSS ‘Back To Top’ Arrows

Animated ‘back to top’ arrows.
Made by EricPorter
June 13, 2017

Author

Links

Made with

About the code

Up Arrow

Animated up arrow button style. Designed to make the action more user friendly for the end user. The text fades away and is replaced with a animation designed to hint at the effect this button will have on the site.

Arrow Boxes

5 HTML and CSS arrow box code examples.

Author

Links

Made with

Источник

Arrow Box with CSS

How can I make this box in CSS? I’ve seen a few tutorials that teach how to create boxes with arrows, however, in my case, none of those tutorials are suitable.

Here is one of my favs. This has many possible shapes built in CSS using a single element:- css-tricks.com/examples/ShapesOfCSS

3 Answers 3

I created your element with the surrounding 1px border. I’m using one element and taking advantage of the :before and :after pseudo-elements (browser-support). The main rectangle has a regular 1px border, but the triangle elements are essentially 2 triangles, one darker than the other.

The lighter triangle sits on top of the darker triangle, which has the effect of hiding it, and is shifted slightly to the left to show the darker triangle underneath. The resulting illusion is a 1px dark border on the triangle itself.

Here’s a question that asks a similar question:

One of the answers actually has a great explanation of how one can achieve this triangle effect:

Also, this is an excellent reference for all the fancy things you can do with borders (thanks to PSCoder):

. and here’s a sweet css generator (thanks to David Taiaroa):

Anyway, here’s the corresponding code:

 #arrow < width: 128px; height: 100px; background-color: #ccc; border: 1px solid #999; position: relative; >#arrow:after < content: ''; position: absolute; top: 0px; left: 128px; width: 0; height: 0; border: 50px solid transparent; border-left: 12px solid #ccc; >#arrow:before

Here is the solution I created

There are 2 simple ways to do this. The first, less efficient way is to have 2 elements. I take advantage of the :after pseudo element. I used position:absolute on the :after for 2 reasons.

1. You can place the element where you need to
2. It prevents the end of the triangle from being cut off

The key to creating the triangle is using the border property. You have 2 borders with the color of transparent set. These 2 borders are opposite of the direction you want to go. So if you want to make a right triangle, then use top and bottom . What gives the arrow it’s shape is the last border. It also goes in the opposite direction. So for a right triangle, you would use border-left with a color. To get this to be the proper height, you must do half of the height of the box you want to place it on

Источник

How to create a box with a left arrow and border

I’m trying to create a box with a left arrow/triangle which has a opaque border surrounding it. I’m using CSS3 in order to avoid using images. The box will contain dynamic content so the height will likely vary. In the image attached you can see my progress on the left and what I am trying to achieve on the right. Here is a JSFiddle of what I have so far. As you can see there are 2 problems: 1) Due to the opacity you can see the border surrounding the triangle overlaps the border surrounding the box. This needs to be avoided. 2) I need the arrow/triangle to be rather large, which means the right side of the arrow/triangle is equally as large and overlaps the box thus obscuring content, you can see this in the JSFiddle link and image attached. Need some help and pointers! Thanks in advance.

.map_infobox < margin: 30px 0 0 30px; position: relative; background: #FFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 250px; height: 250px; border-opacity: 0.3; border: 5px solid rgba(0, 0, 0, .3); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ >.map_infobox:before < content: ""; position: absolute; top: 50%; left:-21px; z-index: 1; height:30px; width:30px; margin-top: -15px; background:#FFF; transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); border-opacity: 0.3; border-left: 5px solid rgba(0, 0, 0, .3); border-bottom: 5px solid rgba(0, 0, 0, .3); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ > 
 
Title goes here
 
Nam nibh dolor, luctus eget lorem tincidunt, egestas scelerisque erat? Morbi consequat auctor ipsum, eu ultricies nisl aliquam venenatis. Fusce feugiat posuere lectus at dictum. Integer sagittis massa justo, sed pretium ante hendrerit eget.
 
 

Источник