How to mark up these blocks adaptive?

Prompt, please how to mark up these blocks and adaptive it possible? The pictures:
1) the Picture of a button: it is unclear how to make it so that I was sure that the arrows will not come out the edges. I think they only brand positioning perhaps, but then they can easily be cut off.. How is it possible to exclude?
2) Quote from bolts: bolts think separately as before and after to do but how to do this stroke, as in the layout? If you do the background, then of course it turns out a distorted picture..
3) Title "Why the best?": Same thing.. clean background will not work because begins to deform.
4) Man: the same as with the arrows at the button.. it is not clear how to ensure that the cloud did not run over the page.

August 19th 19 at 23:18
3 answers
August 19th 19 at 23:20
1) Have to do in the good old days when not all browsers supported border round:5ca14b887bf14faaa0db7ef77955f3e4.png2) the arrows. Js check if they fit completely, if Yes, leave, otherwise display: none. Although I do not think that if a part will not fit, it will be a disaster.
3) If the screen is narrow, install alternative the cloud with an arrow at the top under the man. Otherwise - as in the layout.
August 19th 19 at 23:22
The first 3 without any problems are made by cutting the background picture to pieces.
Second of all in the mobile version of leave without arrows, don't need them on a narrow screen.

But with the cloud, then there really should think a designer how to make this particular exceptional little guy and cloud looked at the size of 300 pixels wide. And since it is practically impossible (it will be very small and all the details will be lost), then the designer must think like the little guy and the cloud is "split" and display a little differently, its layout in the mobile version (on narrow screens).
August 19th 19 at 23:24
1. Frame with bolts can be done using border-image, bolts through the before and after positioning or bg. (The second option personally, I like more)
2. Block arrow I would do using display:flex and the shooters background contain
3. Similar to background-size: contain. The size of the font or take over vw any change in the breaking points of the layout.
1. Why pseudo-elements if you use border-image? Cut the frame as shown and all ) - eduardo_Crist commented on August 19th 19 at 23:27
For example, to reduce the thickness of the border, if you want to raise the text above. - Elsie.Strom commented on August 19th 19 at 23:30
: Thickness of the border will still be determined by the angular elements. - eduardo_Crist commented on August 19th 19 at 23:33
: Yes, please, like turning a bolt in the frame, no one bothers. I'm not knocking fists: do the bolts separate elements. And not see the rest of the layout, whether they're individual.
:) - Elsie.Strom commented on August 19th 19 at 23:36
Thanks for the tip with the border image.. There really bolts with no problems frame is done, so that super - haylie_Rath commented on August 19th 19 at 23:39
Just do not forget that IE10 doesn't understand this property - eduardo_Crist commented on August 19th 19 at 23:42
: well, if you need ИЕ10, you will have to cut into pieces and doing multiple bg's - Elsie.Strom commented on August 19th 19 at 23:45

Find more questions by tags CSSHTMLLayoutWeb Development