I created a CSS triangle using the following code:
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
Is there a way to include a border around the triangle shape?
I created a CSS triangle using the following code:
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
Is there a way to include a border around the triangle shape?
If you're looking for a simple way to create a triangle in CSS, one method is to stack two elements (such as tag + tag or tag + tag:pseudo-element) with relative/absolute positioning and play around with border sizes. You can find more detailed instructions in this CSS triangle custom border color tutorial.
For a customizable triangle that can contain text or images, be translucent, or have a background, you can utilize CSS3 transformations alongside two elements. Check out the demo at http://codepen.io/gc-nomade/pen/gdoGA.
See below for the CSS code:
.triangle {
display: inline-block;
margin: 0 1em;
padding-top: 5px; /* Leave room for potential box-shadow */
width: 10em;
border-bottom: 2px solid; /* Create bottom border of the triangle */
overflow: hidden; /* Hide part of the span */
position: relative; /* Make it the reference for absolute child elements */
text-align: center;
color: turquoise; /* Setting a color for the border and shadow unless specified elsewhere */
text-shadow: 1px 1px 1px black, -1px -1px 1px white;
box-shadow: 0 4px 5px -5px black; /* Add a reduced shadow */
}
.triangle p {
margin: 0;
display: inline-block; /* Inline boxes can be vertically aligned against each other */
max-width: 50%; /* Try to keep content inside the drawn triangle */
padding-bottom: 5%; /* Keep content from being too close to the bottom */
}
.triangle:before {
content: '';
display: inline-block; /* Side-step text */
padding-top: 50%; /* Creates a triangle shape with height half of width */
vertical-align: bottom; /* Ensure text starts at the bottom */
}
.triangle .notext {
width: 100%;
background: linear-gradient(to bottom right, pink 5%, yellow 15%, purple 30%);
padding-top: 100%; /* Needs enough height for square or container */
position: absolute; /* Out of flow manipulates nothing else */
z-index: -1; /* Keeps content visible */
border: 2px solid; /* Adds borders */
left: 0;
transform: rotate(45deg); /* Give it a twist */
transform-origin: 24.5% 59.5%; /* Point of rotation control */
box-shadow: 0 0 5px black; /* Shadow effect */
}
.triangle + .triangle {
width: 15em;
}
.triangle + .triangle + .triangle {
width: 8em;
}
div#auto.triangle {
width: auto;
}
body {
background: repeating-linear-gradient(to left, gray, purple, lime, violet, turquoise, orange, white 5em);
text-align: center;
}
HTML base example:
<div class="triangle">
<p>SOME TEXT</p>
<span class="notext"></span>
</div>
To adjust the shape or rotation of your triangle, modify the border-xx property of the div, use padding-top on both div/span elements, tweak the transform-origin and transform properties like rotate(xxdeg), and potentially adjust the width of the span element.
Seeking assistance with properly aligning two forms. I have tried using a positioning approach, but the layout gets disrupted when the browser's Zoom level is adjusted. The second button ends up shifting slightly either upwards or downwards. Here is t ...
I am trying to develop a high chart graph. Check out my code on FIDDLE LINK. I have two values, a and b, for the x-axis and y-axis. The issue arises when the difference between a and b is minimal, such as when both are equal (-9). In such cases, the grap ...
I'm still learning HTML/CSS and decided to implement a navbar menu from Bootstrap documentation. However, I encountered an issue where the Dropdown menu and other links are not functioning properly. Here is the code for the navbar: <!-- Head --& ...
I am attempting to automatically scroll to the div specified in the URL. The URL may include one of 21 different IDs such as: url.com/test#lite1 url.com/test#lite2 url.com/test#lite3 This scrolling action should happen when the page loads (so that user ...
The contents of my page are limited to two section elements. Both sections have a fixed size of 1280px in width and 800px in height. However, I noticed an issue when resizing the browser window; at a window width of 1281px, a horizontal scrollbar appears e ...
UPDATE: I found a creative solution to my issue. By adding margin-left and margin-right set to auto, along with fixing the width of the nav menu to 1002px and setting its positioning to relative, I was able to achieve the desired effect. Additionally, I cr ...
Currently, I am working on implementing a first person movement feature using the mouse. While I have successfully implemented it using the keyboard, I am facing challenges with the mouse input. The issue arises from the ambiguity in movement directions ca ...
Is there a way to apply a red border to the <h:selectBooleanCheckbox> element? I attempted to do so using the following code, but unfortunately, no border is displayed. <h:selectBooleanCheckbox style="border: 1px solid red;" /> ...
I am currently working with a selectize component that appears like this: https://i.sstatic.net/z2aTw.png My objective is to adjust the appearance of the search input to make it smaller by changing its class from the standard bootstrap input to input-sm. ...
My goal is to make a table responsive by using media queries to hide optional columns on smaller devices. I need to hide two columns based on different screen sizes: @media screen and (max-width: 33em) { th.optional-1, td.optional-1 { display: no ...
I'm having trouble figuring out why my links are not working for the .pushMenu divs on the left and right side, html: <header class="header"> <div class="pushMenu" id="left"> <a href="" title=""><p>l</p>< ...
How can I place 2 horizontal cards next to each other? My current code overlaps the cards and creates a messy layout. I want the cards to be side by side like this: https://i.sstatic.net/s6225.png <div class="card-body p-0 d-flex justify-content-arou ...
Is it possible to apply HTML 5 fullscreen API to the background image of a div? <div class="bgimg" style="background-image:url('img/home-1.jpg')" /> <img src="img/fullscreen.png" id="fullscreen-btn"> </div> I am trying to m ...
I've been experimenting with a code pen that I stumbled upon: http://codepen.io/surjithctly/pen/pLDwe When I encase the checkbox in a div with the class "mynav," it stops functioning as intended. How do I implement the specified styling for the check ...
I'm currently working on developing a shopping cart component in React, but my supervisor has advised against using CSS directly in the HTML markup due to security concerns. While I understand the importance of good coding practices, I fail to see how ...
I am currently working on a visual chart project using the JavaScript library highchart. After setting up my chart with some dummy data, I am looking to incorporate functionality that allows for triggering an image slide based on the chart data. Specific ...
Google emphasizes the importance of not hiding content, as it may not be counted by search engines. However, Google Cache has shown some discrepancies in understanding certain elements correctly. It's possible that what Google perceives as hidden migh ...
I'm currently working on a menu overlay that expands to fill the screen when a user clicks a button in the corner. I'd like the menu items to fade in one by one, similar to the effect used on this website: Most of the functionality is there, but ...
I am looking for a solution: $('*').click(function() { if($(this).css("background-color") == "#ffffff") { $(this).css("background-color") == "#000000" } }); that will execute on click of a specific cla ...
I've been struggling to customize the tabs I created using this code, but nothing seems to be working as expected. This article was suggested to me recently, however, when I tried implementing it, I encountered errors. I also looked at this stackoverf ...