Highlighted

How to make an unordered list border with two sharp edges?

New Here ,
Nov 01, 2017

Copy link to clipboard

Copied

How to make an unordered list border with sharp edges like this? When the current page is active or the text is hover, the color of text and background change, and the border become two sharp edges.

tri.PNG

Here is the code I have done so far:

                    <ul>

                    <li><a href="Vision" class="active">Vision</a></li>

                   

                    <li><a href="Governance">Governance</a></li>

                    <br>

                    <li><a href="Our Board">Our Board</a></li>

                    <br>

                    <li><a href="Staff">Staff</a></li>

                    <br>

                    <li><a href="Advocacy">Advocacy</a></li>

                    </ul>

See if the below works for you. I don't believe this or the code on the wesbite example you provided is the brightest solution in the box to use because if you zoom the text the whole thing starts to breaks down. Probably produced by some designer without any consideration for end users text sizing.

<!DOCTYPE>

<html>

<head>

<meta charset="UTF-8" />

<title>Arrow Anchor Tag</title>

<style>

body {

font-family: helvetica, sans-serif;

}

nav {

width: 25%;

}

nav ul {

margin: 0;

padding: 0;

}

nav li {

margin: 0;

padding: 0;

border-bottom: 1px solid #ccc;

list-style: none;

}

nav a {

margin: 0;

position: relative;

padding: 18px 20px;

display: block;

text-decoration: none;

color: #666;

}

nav a:hover {

background: #70C1A0;

color: #fff;

}

/* ARROW */

nav a:hover:after {

content: '';

display: block;

position: absolute;

left: 100%;

width: 0;

height: 0;

border-style: solid;

}

nav a:hover:after {

top: 0;

border-color: transparent transparent transparent #70C1A0;

border-width: 26px;

}

/* ACTIVE TAB */

.active a {

background-color: #70C1A0;

color: #fff;

}

.active a:after {

content: '';

display: block;

position: absolute;

left: 100%;

width: 0;

height: 0;

border-style: solid;

top: 0;

border-color: transparent transparent transparent #70C1A0;

border-width: 26px;

}

                

</style>

</head>

<body>

<nav>

<li><a href="#">Vision</a></li>

<li class="active"><a href="#">Governance</a></li>

<li><a href="#">Our Board</a></li>

<li><a href="#">Staff</a></li>

<li><a href="#">Advocacy</a></li>

</nav>

</body>

</html>

TOPICS
Create menus in Dreamweaver, Learn Dreamweaver

Views

365

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to make an unordered list border with two sharp edges?

New Here ,
Nov 01, 2017

Copy link to clipboard

Copied

How to make an unordered list border with sharp edges like this? When the current page is active or the text is hover, the color of text and background change, and the border become two sharp edges.

tri.PNG

Here is the code I have done so far:

                    <ul>

                    <li><a href="Vision" class="active">Vision</a></li>

                   

                    <li><a href="Governance">Governance</a></li>

                    <br>

                    <li><a href="Our Board">Our Board</a></li>

                    <br>

                    <li><a href="Staff">Staff</a></li>

                    <br>

                    <li><a href="Advocacy">Advocacy</a></li>

                    </ul>

See if the below works for you. I don't believe this or the code on the wesbite example you provided is the brightest solution in the box to use because if you zoom the text the whole thing starts to breaks down. Probably produced by some designer without any consideration for end users text sizing.

<!DOCTYPE>

<html>

<head>

<meta charset="UTF-8" />

<title>Arrow Anchor Tag</title>

<style>

body {

font-family: helvetica, sans-serif;

}

nav {

width: 25%;

}

nav ul {

margin: 0;

padding: 0;

}

nav li {

margin: 0;

padding: 0;

border-bottom: 1px solid #ccc;

list-style: none;

}

nav a {

margin: 0;

position: relative;

padding: 18px 20px;

display: block;

text-decoration: none;

color: #666;

}

nav a:hover {

background: #70C1A0;

color: #fff;

}

/* ARROW */

nav a:hover:after {

content: '';

display: block;

position: absolute;

left: 100%;

width: 0;

height: 0;

border-style: solid;

}

nav a:hover:after {

top: 0;

border-color: transparent transparent transparent #70C1A0;

border-width: 26px;

}

/* ACTIVE TAB */

.active a {

background-color: #70C1A0;

color: #fff;

}

.active a:after {

content: '';

display: block;

position: absolute;

left: 100%;

width: 0;

height: 0;

border-style: solid;

top: 0;

border-color: transparent transparent transparent #70C1A0;

border-width: 26px;

}

                

</style>

</head>

<body>

<nav>

<li><a href="#">Vision</a></li>

<li class="active"><a href="#">Governance</a></li>

<li><a href="#">Our Board</a></li>

<li><a href="#">Staff</a></li>

<li><a href="#">Advocacy</a></li>

</nav>

</body>

</html>

TOPICS
Create menus in Dreamweaver, Learn Dreamweaver

Views

366

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 01, 2017 0
Adobe Community Professional ,
Nov 01, 2017

Copy link to clipboard

Copied

If you give us the location of the webpage from where you got the image, we may be able to help you


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2017 0
New Here ,
Nov 01, 2017

Copy link to clipboard

Copied

Attached is the website that have the above image. Thanks.

https://lungfoundation.com.au/about-us/mission/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2017 0
LEGEND ,
Nov 02, 2017

Copy link to clipboard

Copied

See if the below works for you. I don't believe this or the code on the wesbite example you provided is the brightest solution in the box to use because if you zoom the text the whole thing starts to breaks down. Probably produced by some designer without any consideration for end users text sizing.

<!DOCTYPE>

<html>

<head>

<meta charset="UTF-8" />

<title>Arrow Anchor Tag</title>

<style>

body {

font-family: helvetica, sans-serif;

}

nav {

width: 25%;

}

nav ul {

margin: 0;

padding: 0;

}

nav li {

margin: 0;

padding: 0;

border-bottom: 1px solid #ccc;

list-style: none;

}

nav a {

margin: 0;

position: relative;

padding: 18px 20px;

display: block;

text-decoration: none;

color: #666;

}

nav a:hover {

background: #70C1A0;

color: #fff;

}

/* ARROW */

nav a:hover:after {

content: '';

display: block;

position: absolute;

left: 100%;

width: 0;

height: 0;

border-style: solid;

}

nav a:hover:after {

top: 0;

border-color: transparent transparent transparent #70C1A0;

border-width: 26px;

}

/* ACTIVE TAB */

.active a {

background-color: #70C1A0;

color: #fff;

}

.active a:after {

content: '';

display: block;

position: absolute;

left: 100%;

width: 0;

height: 0;

border-style: solid;

top: 0;

border-color: transparent transparent transparent #70C1A0;

border-width: 26px;

}

                

</style>

</head>

<body>

<nav>

<li><a href="#">Vision</a></li>

<li class="active"><a href="#">Governance</a></li>

<li><a href="#">Our Board</a></li>

<li><a href="#">Staff</a></li>

<li><a href="#">Advocacy</a></li>

</nav>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 02, 2017 0