Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am trying to create a thin arrow (direction towards right) using css.
I have created the circled div but stuck with the arrow
<div class="circleBase type2"></div>
I have created the fiddle and also attached the reference image
http://jsfiddle.net/squidraj/c9eyrat6/
Any hint/suggestion/reference link would do great. Thanks in advance.
Here's one option using a pseudo-element although an image or SVG would probably be preferable.
JSfiddle Demo
CSS
.circleBase {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
overflow: hidden;
box-sizing: border-box;
}
.type2 {
width: 50px;
height: 50px;
background: #ccc;
border: 3px solid #000;
position: relative;
}
.type2:before {
content:"";
position: absolute;
top:0;
right:50%;
width:100%;
height:100%;
border:2px solid white;
transform:rotate(45deg) ;
}
Added a div and gave it a white border check if this suits your interest http://jsfiddle.net/c9eyrat6/6/
#line{
transform:rotate(-10deg);
width:120px;
height:120px;
border:5px solid white;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last year.
Improve this question
Can anyone help me?
How can I integrate in html pages 2 different CSS styles for 2 diferent images, both being separated vertically by a space?
See the paintings below. They have different sizes, different styles.
Something like this. You may change the dimensions anytime
.img, .firstImage, .secondImage {
border: 1px dotted blue;
width: 200px;
}
.firstImage {
float:left;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
.secondImage {
float:right;
border: 2px solid #fff;
border-radius: 2px;
padding: 3px;
width: 120px;
}
A friend write for me this code, a good answer:
HTML
<div id="img1"><img src=logo.png"></div>
<div id="img2"><img src=logo2.png"></div>
CSS
#img1{border-style :solid;
border-color:red;}
#img2{border-style :solid;
border-color:blue;
margin-top:20px;}
SOURCE: HERE
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I would like to give users the opportunity to input some text in a few colored shapes. Is it a good strategy to design the shapes in (for instance) illustrator, export as svg and put the input tags (or textarea's) in the svg file?
Other ways of doing this?
This is a simple example of doing what you're looking for with CSS - a starting point for you to work from.
(The CSS can be simplified down but I kept it deliberately verbose so you can see what's going on and where)
.text {
display:block;
width: 60vw;
margin: 1rem 20vw;
}
.textleft {
display: inline-block;
width:49%;
margin: 1rem 0;
padding:0 9% 0 5%;
box-sizing: border-box;
}
.textright {
width:49%;
display: inline-block;
margin: 1rem 0;
padding:0 5% 0 9%;
box-sizing: border-box;
}
.txtarea {
width:100%;
color: #000;
height: 7rem;
font-size:1rem;
box-sizing:border-box;
padding:1rem;
border: none;
border-radius:2rem;
resize: none;
overflow:hidden;
}
#red {
background-color: #c00;
color: #eee;
}
#green {
background-color: #0c0;
}
#blue {
background-color: #33f;
color: #ccc;
}
#yellow {
background-color: #ff0;
}
<div class='text'><textarea id='red' class='txtarea' name='myinfo_top'>Some Words - Click on me to type into this text box!</textarea></div>
<div class='textleft'><textarea id='green' class='txtarea' name='myinfo_left'>Some Left Words</textarea></div>
<div class='textright'><textarea id='blue' class='txtarea' name='myinfo_right'>Some Right Words</textarea></div>
<div class='text'><textarea id='yellow' class='txtarea' name='myinfo_bottoms'>Some more Words</textarea></div>
Create div tag that will contain elements of height and width, if you want rounded corners you might use border-radius in CSS.
div{
width: 200px;
height: 200px;
border-radius: 15px;
background-color: blue;
}
Then you can add whatever text you would like. Its the best option, adding image in the background, it takes a lot more processing time than pure CSS.
Im trying to implement some part of a page that needs some custom styled table (I know tables are a big no no for this but that is wat im doing so please try to only look at the question.)
The problem is that when I include Bootstrap the line gets destroyed. The easisest way to explain is by looking at this jsfiddle and then remove the bootstrap dependency.
The problem I think is in the following CSS:
td span {
background-color: #fff;
color: #000;
}
hr {
border: none;
color: blue;
background-color: blue;
height: 1px;
position: absolute;
display: block;
width: 100%;
z-index: -1;
}
This implementation is borrowing ideas from an earlier question.
Bootstrap applies a number of styles to elements directly- in your layout the (main) conflicting rule is line 159 of bootstrap-combined.min.css for hr elements:
hr {
margin:20px 0;
border:0;
border-top:1px solid #eeeeee;
border-bottom:1px solid #ffffff;
}
To rectify, add:
Demo Fiddle
hr{
margin:10px 0;
}
To your CSS. Note you may also want to change styling for a and table elements.
To see what styling Bootstrap applies to each element, use the DOM inspector in you browsers developer tools to step through into the element in questions and its CSS.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I want to add two triangles using pseudo elements after the text in a table header cell. You guessed it, they would represent that the column is sortable. Of course, I can do that using a background image but I want to avoid that traditional solution.
I can add one triangle using the pseudo element :after. That's easy. I cannot use pseudo element :before to add the other triangle because it is placed before the text in the "th" element. If I have to position it, using the :before pseudo element, to be placed after the text, that will not work as a generic solution because each column header has, of course, different text.
Any idea on how to get around this?
DEMO: http://jsfiddle.net/7Wfc8/
HTML
<table>
<tr>
<th>Short</th>
<th>Really much longer</th>
</tr>
</table>
CSS
th {
border: 1px solid red;
padding-right: 30px;
position: relative;
}
th:after,
th:before {
content: " ";
display: block;
height: 0;
width: 0;
border: 5px solid transparent;
position: absolute;
right: 5px;
}
th:after {
top: -2px;
border-bottom-color: lime;
}
th:before {
top: 10px;
border-top-color: lime;
}
Here's a FIDDLE
<table>
<tr>
<th>Text</th>
<th>Text</th>
</tr>
</table>
th {
width: 160px;
padding: 5px;
border: 1px solid #999;
}
th:after {
display: inline-block;
float: right;
width: 10px;
line-height: 11px;
font-family: sans-serif;
font-size: 12px;
color: #0296cc;
content: '▲ ▼';
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I've found plenty of tutorials for creating Trapezoids using CSS3 but I am looking to create a four sided shape where none of the side are parallel (trapezium) like the one in the picture below.
Is this possible?
Okay..Sorry for being late. Here's my answer:
Fiddle: http://jsfiddle.net/fELER/1/
CSS:
#up-triangle {
width: 0;
height: 0;
border-bottom: 200px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
#right-triangle {
position:absolute;
top: 10px;
left:175px;
width: 50px;
height: 100px;
border-style: solid;
border-width: 100px 0 0 300px;
border-color: transparent transparent transparent yellow;
-webkit-transform: skew(29deg);
-moz-transform: skew(29deg);
-o-transform: skew(29deg);
transform: skew(29deg);
}
HTML:
<div id="up-triangle"></div>
<div id="right-triangle"></div>
Some useful links:
http://www.css3shapes.com/
http://apps.eky.hk/css-triangle-generator/
you could do this "by hand"
html:
<canvas id="polygon" />
javascript
var polygon = document.getElementById('polygon').getContext('2d');
polygon.fillStyle = '#f00';
polygon.beginPath();
polygon.moveTo(0, 0);
polygon.lineTo(90,50);
polygon.lineTo(70, 70);
polygon.lineTo(0, 90);
polygon.closePath();
polygon.fill();
this doesn't make shure it's convex and it has no parallel lines. You have to put in the correct coordinates.
Fiddle: http://jsfiddle.net/8t4rZ/
#box {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
CSS trapezoid