I am trying to draw a triangle with HTML and CSS. But I am unable to do it succesfully.
I looked up the most common solution for drawing triangle in CSS.
This the HTML code:
<html>
<head>
<link rel="stylesheet" href="tiangle.css" type="text/css">
</head>
<body>
<div id = 'triangle-up'></div>
</body>
</html>
This is the CSS code:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
The code should draw a red colored upward-facing triangle, but it displays a blank white page.
Please help.
Is it possible that your CSS links to the misspelled tiangle.css but your actual file name is spelled correctly (triangle.css)?
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div id='triangle-up'></div>
Your code is valid. Are you sure you're actually looking at the correct file? Check your console logs. Are they saying any 404 errors (eg you are not linking your stylesheet correctly)?
There is a typo in your href. It should say triangle instead of tiangle.
Related
I have two css IDs on different files, and I have to change the file with another only when the Program executes in Internet Explorer.
I have this file called "custom.css":
#employee-list {
border-bottom: 1px solid #c1c1c1;
border-top: 1px solid #c1c1c1;
height: initial;
}
I need (I must not modify custom.css) to set "height" to "auto". But only if the page is rendered on IE. So I created a second css file called "customie.css":
#employee-list {
border-bottom: 1px solid #c1c1c1;
border-top: 1px solid #c1c1c1;
height: auto;
}
After that I wrote this Conditional Comment in the <head> of my MasterPage .cshtml.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="customie.css" />
<![endif]-->
Problem is this: Conditional Comment doesn't work and the customie.css file overwrites the custom.css(which annuls itself) .
How can I apply height: auto only for IE pages?
Thank you,
Angelo
No idea why the conditional isn't working, but you can achieve the desired effect using the CSS below. IE doesn't support initial, so it will fall back to auto instead.
#employee-list {
border-bottom: 1px solid #c1c1c1;
border-top: 1px solid #c1c1c1;
height: auto;
height: initial;
}
i am fairly new in coding and need some help. Currently i am trying to form a border around my texts and photo. But somehow I can't do it. It should roughly look like this http://imgur.com/a/fkUba. On the top parts photos and on the bottom ones text.
And my code looks like this
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style>
img {
border: 5px solid black;
}
</style>
</head>
<body>
<img src="https://pbs.twimg.com/profile_images/770467680012890112/kSz1jtnn.jpg" alt="Coca Cola"
Coca Cola
</body>
</html>
Like this, i can only put a border around the logo.
I know how to text, link (<p> <a href>) but I don't know how to but a proper border around these. This is like 'here is my homework for you' but i really need help!
I would recommend making a class to store your border to cut down on code.
.borders {
border: 1px solid black;
}
Then assign that class to everything that you want to have a border:
<img class="borders" src="https://pbs.twimg.com/profile_images/7704676800128901/kSz1jtnn.jpg"
As for the text you can add some padding to the top and bottom to increase the white space:
h2 {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
I think you need to set border for your logo like this:
in the css typing code like this.
img{
border: 1px solid black;
}
good luck
Just like you have border around image using this style:
img {
border: 5px solid black;
}
you can have border around almost any element like similar styles like:
p {
border: 5px solid black;
}
a {
border: 5px solid black;
}
I'm trying to create a custom styled text field for a client.
They want a trapezium shaped input field.
This is what I've done till now:
HTML
<input type="text">
CSS
input{
background: #ccc;
color: #000;
border-bottom: 50px solid #ccc;
padding-top:5px;
border-left: 20px solid #fff;
border-right: 20px solid #fff;
height: 0px;
width: 200px;
}
Fiddle
Any idea on how or if it's possible to make something like this: .
Something like this:
<span class="outer">
<span class="inner">
<input type="text" value="test value" />
</span>
</span>
.outer {
display: inline-block;
border-bottom: 34px solid #000;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0px;
}
.inner {
display: inline-block;
margin: 1px -18px -40px -18px;
border-bottom: 32px solid white;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0px;
}
input
{
background: transparent;
border: none;
display: inline-block;
font-size: 130%;
}
http://jsfiddle.net/fNCt4/4/
The input itself doesn't contribute to the shape. It's only those two spans. You could use the input element itself for the inner shape, but since you need to add markup anyway, I think you might as well add two 'generic' trapezoid helper shapes and leave the input element untouched.
You'll need two to fake the border. This is needed, because the shape itself is created by adding a border, so the visible border is constructed by overlaying a slightly smaller shape onto the other.
The rest is tricks with negative margins to allow the inner shape to be positioned over the border of the outer shape. And of course using transparent as a color, to prevent the 'negative space' of the inner shape to overwrite the outer shape.
Once again clients being complicated!
I suggest you use a background image In the CSS of a trapezium with the outside transparent so a png. Make the margins in a bit so the user doesn't write outside the trapezium.
Hope this helps
You have two options here
CSS3
Image as a background.
for css3 option check out this link http://css-tricks.com/examples/ShapesOfCSS/
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0; width: 100px;
}
But to make it backward compatible i would suggest you go for image as a background as a fallback for css3.
I was initially going for an image with a black border, along with rounded corners. However, rather than having both a rounded image and a rounded border, on Webkit I ended up with a rectangular image and a rounded border. The rectangular image seemed to overlap parts of the border at the corners, making for a slightly weird looking result. On firefox and opera I've come up with the result I had wanted but I was wondering how I would achieve the same effect on webkit. Here's some code you can run to see what I'm talking about. Thanks in advance for the help!
<!doctype html>
<html>
<head>
<title> Testing Website </title>
<style type="text/css">
img {
height: 500px;
border: 5px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
}
</style>
</head>
<body>
<img src = "http://www.public-domain-image.com/studio/slides/sunflower-on-white-background.jpg">
</body>
</html>
Use box-shadow: http://jsfiddle.net/UQ2kt/
You could try a jQuery plugin. Gives a lot of options. http://jquery.malsup.com/corner/
Try;
img{
height: 500px;
width: 500px;
border: 5px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
display:block;
}
I want to make custom password in HTML But when i am running it with browser like chrome , Mozilla its not visible there.Please find my HTML & CSS.What wrong i am doing?
<link href="mypwd.css" rel="stylesheet" type="text/css" />
<input type="password" class="pwd">
CSS File:
.pwd{
border: 3px;
border-color: red;
}
It's there, you just haven't defined a proper border.
Try this:
.pwd {
border: 3px solid red;
}
Or if you'd rather not use shorthand:
.pwd {
border-color: red;
border-style: solid;
border-width: 3px;
}
<link> will have to be in the <head> as far as I know.
Also border should be:
border: 3px solid red;
Change your class to
.pwd{
border : 3px solid red;
}
For more infor check this fiddle