16 questions
9
votes
3
answers
359
views
Width depending on child element's width and content height
I want to create an angled text flow where the width of a text line is a known value --w. What I have so far is the code below:
* { margin: 0 }
html, body { display: grid }
body {
--w: min(...
- 37.6k
2
votes
2
answers
180
views
avoiding overflow in grid with cell containing shape-outside
I am trying to build grid where some cells have elements combining shape-outside with some phrasing content. The shape is triangular (for simplicity), responsively filling half the cell.
My problem is ...
- 5,315
2
votes
1
answer
434
views
CSS Shape-Outside pushes text out of border-box only in Chrome
I am using shape-outside (boundary) and clip-path (content) to have a "triangle" with text on top of a photo.
Safari and Firefox both work almost the same, but Chrome behaves strange (or ...
- 53
2
votes
0
answers
301
views
Shape-outside CSS property works in Chrome but doesn't work in Safari
Dear Stackoverflow community,
I hope you can help me. My main problem is that the shape-outside CSS property works in Chrome but doesn't work in Safari
.oligosacharid-container {
overflow: ...
1
vote
1
answer
3k
views
Using CSS to wrap text around image and have it behave like a background image
I'm using shape-outside to give a "magazine" feel to a website. Each page has a new image of a person and the text wraps around that person. Shape outside works perfectly and easy! Only ...
- 32.9k
1
vote
2
answers
78
views
My CSS shape-outside circle position is off, not sure what is the cause
I’m testing using css shape-outside to make text wrap a circle based on a div, the circle area is always a few pixel off .
I set my css to shape-outside: circle(50% at 50% 50%); I suppose this will ...
1
vote
0
answers
55
views
Can text that is wrapping a fixed shape be made scrollable so that if it's fully justified it automatically readjusts itself? (html / css )
I want the margin to be be an irregular shape that is fixed so that as I scroll up and down, the spacing of the words will automatically readjust to fit around the shape.
to start I tried making a ...
- 11
0
votes
0
answers
46
views
Spans don't wrap around parent paragraph if paragraph has a shape-outside sibling (Chrome)
p {
width: 50px;
}
.some-float {
display: block;
width: 80px;
height: 1px;
position: relative;
float: left;
shape-outside: polygon(0 0, 100% 0);
}
<div class="some-float"...
- 322
0
votes
2
answers
73
views
Make a Div block wrap around a shape
I am pretty new with HTML, CSS and I wanted to know if this layout is possible to achieve.
I have tried using the shape-outside property. But the result is coming out like this:
This is what I have ...
- 3
0
votes
0
answers
69
views
Making a slanted div same height as its parents
This is a banner image, with 2 columns.
Floated-div is slanted to one side (like a razor design), see the picture further down, and the text are suppose to follow the left alignment with the slanted ...
0
votes
1
answer
235
views
Wrap text inside triangles in flex design
Edit: I figured out the issue: shape-outside needs to be sibling, and not child, of the item that it wants to affect. I decided to rewrite the section as a grid (as recommended in the comments, thanks ...
- 3
0
votes
0
answers
83
views
Showing text inside shape, on a specific location
I’m trying to implement an app that will combine a text, and an audio of the text being read, with “read-along” functionality: the line of text being read is highlighted. Also, clicking on a specific ...
0
votes
0
answers
125
views
Drawing Nodes Graphics Paint C# [duplicate]
EDIT: How do I activate scrollbars and maintain my drawing after scrolling, like Paint application. As you can see I'm drawing a circle with 25px radius, outside the client rectangle, but I can't ...
- 13
0
votes
1
answer
211
views
CSS shape-outside and responsive content
So I am using shape-outside: url(path-to-image); in my figure element, which has an img inside of it with the same url path. The figure width is a percentage though, so it's responsive and changes ...
- 2,389
0
votes
2
answers
75
views
HTML CSS place text in the middle vertically and horizontally in the div with shape-outside [duplicate]
How to place text in the middle of the div?
JavaScript solution is also acceptable.
In this example the text is wrapping inside a rhombus. But not in the middle of the rhombus.
div.box {
--s:450px;
...
- 403
-1
votes
1
answer
220
views
CSS: shape-outside + translate
When inserting an element with an image as shape-outside mask and translating the position, the mask is not translating, so the mask is not working properly.
The same is happening if transforming a ...
- 5,846