shape

I was trying to create triangles in CSS for a responsive site today and couldn't find a good example on stackoverflow, so here's how I did it. Making angular shapes responsive is a little tricky because you can't use percentages as border values in your CSS, so I wrote a couple functions to calculate the page width and resize a triangle accordingly. The first calculates the size on loading the page, the second recalculates the size as the page width changes. CSS: .triangle { width: 0; height: 0; border-top: 50px solid rgba(255, 255, 0, 1); border-right: 100px solid transparent; } HTML: <div

I am using a drawable as a background of a TextView just to have a divider line below the text. A achivied it with this drawable-xml: <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shape="rectangle"> <solid android:color="#FFDDDDDD" /> <gradient android:angle="0" android:startColor="#FFAAAAAA" android:endColor="#FFEEEEEE" /> </shape> </item> <item android:bottom="2dp"> <shape android:shape="rectangle"> <solid android:color="#FF000000" /> </shape> </item> </layer-list> But this method draws a colored

This question already has an answer here: How to bevel the corner of a block div? 4 answers I am trying to create a Parallelogram with a straight right side in css but so far I am struggling to achieve this. I am using css ... -webkit-transform: skew(-18deg); -moz-transform: skew(-18deg); -o-transform: skew(-18deg); ...to 'skew' the rectangle to create the Parallelogram. I am wondering if the right side can be made straight? Would it require :before and :after in the css? Any help of this would be great. Thanks, Phil You can achieve this by adding a triangle shaped element and positioning it

There are two adjacent graphic buttons. If I use the method of calculation of the coordinates touch TouchEvent , I have to create a large array of coordinates. Maybe there is another method? Probably not the best solution but you could overlap two buttons each representing a part of the image(the black or white) and make the rest of the Button 's image transparent(the images will have the same dimensions for both buttons). You'll also need to extend the Button class to override how the onTouchEvent method handles the touch events, depending on the point where the touch happened being a

I'm interested if it's possible to create wrapped (or maybe better said twisted) border using CSS. Effect I wanted to achieve is in the picture. Most easiest and neat solution would be to use svg to create the border. #container { position: relative; width: 200px; height: 30px; } #content { text-transform: uppercase; position: absolute; width: 200px; height: 30px; top: 0; text-align: center; line-height: 30px; } <div id="container"> <svg width="200" height="30" viewBox="-1 -2 201 33"> <path d="M0,0 h200 l-15,15 l15,15 h-200 l15,-15z" stroke="black" stroke-width="2" fill="none" /> </svg> <div

I want to output a blue-filled hand but get the incorrect output. I've included the input picture, incorrect output picture and code below. i think the code below does not fill the whole image because the image isn't closed yet at the right boundary. how do i close the shape and fill it with blue properly? #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> #include <stdlib.h> using namespace cv; using namespace std; void drawStuff(); void showInputWindow(); void showCannyWindow(); void